8000 feat(CNav): add enclosed variants · coreui/coreui-react@1ad29c6 · GitHub
[go: up one dir, main page]
Skip to content

Commit 1ad29c6

Browse files
mrholekmrholek
committed
feat(CNav): add enclosed variants
1 parent 0b7cbd8 commit 1ad29c6

File tree

4 files changed

+66
-3
lines changed

4 files changed

+66
-3
lines changed

‎packages/coreui-react/src/components/nav/CNav.tsx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export interface CNavProps
2121
/**
2222
* Set the nav variant to tabs or pills.
2323
*/
24-
variant?: 'pills' | 'tabs' | 'underline' | 'underline-border'
24+
variant?: 'enclosed' | 'enclosed-pills' | 'pills' | 'tabs' | 'underline' | 'underline-border'
2525
}
2626

2727
export const CNav: PolymorphicRefForwardingComponent<'ul', CNavProps> = forwardRef<
@@ -32,11 +32,12 @@ export 8000 const CNav: PolymorphicRefForwardingComponent<'ul', CNavProps> = forwardR
3232
<Component
3333
className={classNames(
3434
'nav',
35+
variant === 'enclosed-pills' && 'nav-enclosed', // Enclosed pills variant required for `.nav-enclosed` class
3536
{
3637
[`nav-${layout}`]: layout,
3738
[`nav-${variant}`]: variant,
3839
},
39-
className,
40+
className
4041
)}
4142
role="navigation"
4243
{...rest}
@@ -52,7 +53,14 @@ CNav.propTypes = {
5253
children: PropTypes.node,
5354
className: PropTypes.string,
5455
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+
]),
5664
}
5765

5866
CNav.displayName = 'CNav'

‎packages/docs/content/components/navs-tabs/examples/NavEnclosedExample.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff 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+
}

‎packages/docs/content/components/navs-tabs/examples/NavEnclosedPillsExample.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff 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+
}

‎packages/docs/content/components/navs-tabs/index.mdx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,19 @@ Take that same code, but use `variant="underline-border"` instead:
6464

6565
<ExampleSnippet component="NavUnderlineBorderExample" componentName="React Nav" />
6666

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+
6780
### Fill and justify
6881

6982
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.

0 commit comments

Comments
 (0)
0