Commit1ad29c6

committed

feat(CNav): add enclosed variants

1 parent0b7cbd8 commit1ad29c6Copy full SHA for 1ad29c6

File tree

+66

-3

lines changed

+66

-3

lines changed

Lines changed: 11 additions & 3 deletions

Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@ export interface CNavProps`
`21`	`21`	`/**`
`22`	`22`	`* Set the nav variant to tabs or pills.`
`23`	`23`	`*/`
`24`		`-variant?:'pills'\|'tabs'\|'underline'\|'underline-border'`
	`24`	`+variant?:'enclosed'\|'enclosed-pills'\|'pills'\|'tabs'\|'underline'\|'underline-border'`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`exportconstCNav:PolymorphicRefForwardingComponent<'ul',CNavProps>=forwardRef<`
`@@ -32,11 +32,12 @@ export const CNav: PolymorphicRefForwardingComponent<'ul', CNavProps> = forwardR`
`32`	`32`	`<Component`
`33`	`33`	`className={classNames(`
`34`	`34`	`'nav',`
	`35`	+variant==='enclosed-pills'&&'nav-enclosed',// Enclosed pills variant required for `.nav-enclosed` class
`35`	`36`	`{`
`36`	`37`	[`nav-${layout}`]:layout,
`37`	`38`	[`nav-${variant}`]:variant,
`38`	`39`	`},`
`39`		`-className,`
	`40`	`+className`
`40`	`41`	`)}`
`41`	`42`	`role="navigation"`
`42`	`43`	`{...rest}`
`@@ -52,7 +53,14 @@ CNav.propTypes = {`
`52`	`53`	`children:PropTypes.node,`
`53`	`54`	`className:PropTypes.string,`
`54`	`55`	`layout:PropTypes.oneOf(['fill','justified']),`
`55`		`-variant:PropTypes.oneOf(['pills','tabs','underline','underline-border']),`
	`56`	`+variant:PropTypes.oneOf([`
	`57`	`+'enclosed',`
	`58`	`+'enclosed-pills',`
	`59`	`+'pills',`
	`60`	`+'tabs',`
	`61`	`+'underline',`
	`62`	`+'underline-border',`
	`63`	`+]),`
`56`	`64`	`}`
`57`	`65`
`58`	`66`	`CNav.displayName='CNav'`

Lines changed: 21 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,21 @@`
	`1`	`+importReactfrom'react'`
	`2`	`+import{CNav,CNavItem,CNavLink}from'@coreui/react'`
	`3`	`+`
	`4`	`+exportconstNavEnclosedExample=()=>{`
	`5`	`+return(`
	`6`	`+<CNavvariant="enclosed">`
	`7`	`+<CNavItem>`
	`8`	`+<CNavLinkhref="#"active>Active</CNavLink>`
	`9`	`+</CNavItem>`
	`10`	`+<CNavItem>`
	`11`	`+<CNavLinkhref="#">Link</CNavLink>`
	`12`	`+</CNavItem>`
	`13`	`+<CNavItem>`
	`14`	`+<CNavLinkhref="#">Link</CNavLink>`
	`15`	`+</CNavItem>`
	`16`	`+<CNavItem>`
	`17`	`+<CNavLinkhref="#"disabled>Disabled</CNavLink>`
	`18`	`+</CNavItem>`
	`19`	`+</CNav>`
	`20`	`+)`
	`21`	`+}`

Lines changed: 21 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,21 @@`
	`1`	`+importReactfrom'react'`
	`2`	`+import{CNav,CNavItem,CNavLink}from'@coreui/react'`
	`3`	`+`
	`4`	`+exportconstNavEnclosedPillsExample=()=>{`
	`5`	`+return(`
	`6`	`+<CNavvariant="enclosed-pills">`
	`7`	`+<CNavItem>`
	`8`	`+<CNavLinkhref="#"active>Active</CNavLink>`
	`9`	`+</CNavItem>`
	`10`	`+<CNavItem>`
	`11`	`+<CNavLinkhref="#">Link</CNavLink>`
	`12`	`+</CNavItem>`
	`13`	`+<CNavItem>`
	`14`	`+<CNavLinkhref="#">Link</CNavLink>`
	`15`	`+</CNavItem>`
	`16`	`+<CNavItem>`
	`17`	`+<CNavLinkhref="#"disabled>Disabled</CNavLink>`
	`18`	`+</CNavItem>`
	`19`	`+</CNav>`
	`20`	`+)`
	`21`	`+}`

Lines changed: 13 additions & 0 deletions

Original file line number	Diff line number	Diff line change
@@ -64,6 +64,19 @@ Take that same code, but use `variant="underline-border"` instead:
`64`	`64`
`65`	`65`	`<ExampleSnippetcomponent="NavUnderlineBorderExample"componentName="React Nav" />`
`66`	`66`
	`67`	`+###Enclosed`
	`68`	`+`
	`69`	+Use the`variant="enclosed"` class to give your navigation items a subtle border and rounded styling.
	`70`	`+`
	`71`	`+<ExampleSnippetcomponent="NavEnclosedExample"componentName="React Nav" />`
	`72`	`+`
	`73`	`+###Enclosed pills`
	`74`	`+`
	`75`	+Use the`variant="enclosed-pills"` to achieve a pill-style appearance for each nav item, using pill-shaped borders and smoother outlines.
	`76`	`+`
	`77`	`+<ExampleSnippetcomponent="NavEnclosedPillsExample"componentName="React Nav" />`
	`78`	`+`
	`79`	`+`
`67`	`80`	`###Fill and justify`
`68`	`81`
`69`	`82`	Force your`<CNav>`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your`.nav-item`s, use`layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width.

Comments

(0)