Commit 1ad29c6

committed

feat(CNav): add enclosed variants

1 parent 0b7cbd8 commit 1ad29c6Copy 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`	`export const CNav: 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`	`+import React from 'react'`
	`2`	`+import { CNav, CNavItem, CNavLink } from '@coreui/react'`
	`3`	`+`
	`4`	`+export const NavEnclosedExample = () => {`
	`5`	`+ return (`
	`6`	`+ <CNav variant="enclosed">`
	`7`	`+ <CNavItem>`
	`8`	`+ <CNavLink href="#" active>Active</CNavLink>`
	`9`	`+ </CNavItem>`
	`10`	`+ <CNavItem>`
	`11`	`+ <CNavLink href="#">Link</CNavLink>`
	`12`	`+ </CNavItem>`
	`13`	`+ <CNavItem>`
	`14`	`+ <CNavLink href="#">Link</CNavLink>`
	`15`	`+ </CNavItem>`
	`16`	`+ <CNavItem>`
	`17`	`+ <CNavLink href="#" 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`	`+import React from 'react'`
	`2`	`+import { CNav, CNavItem, CNavLink } from '@coreui/react'`
	`3`	`+`
	`4`	`+export const NavEnclosedPillsExample = () => {`
	`5`	`+ return (`
	`6`	`+ <CNav variant="enclosed-pills">`
	`7`	`+ <CNavItem>`
	`8`	`+ <CNavLink href="#" active>Active</CNavLink>`
	`9`	`+ </CNavItem>`
	`10`	`+ <CNavItem>`
	`11`	`+ <CNavLink href="#">Link</CNavLink>`
	`12`	`+ </CNavItem>`
	`13`	`+ <CNavItem>`
	`14`	`+ <CNavLink href="#">Link</CNavLink>`
	`15`	`+ </CNavItem>`
	`16`	`+ <CNavItem>`
	`17`	`+ <CNavLink href="#" 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`	`<ExampleSnippet component="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`	`+<ExampleSnippet component="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`	`+<ExampleSnippet component="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)