Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitbee8617

Browse files
committed
feat(CTabs): add enclosed variants
1 parent1ad29c6 commitbee8617

File tree

4 files changed

+96
-14
lines changed

4 files changed

+96
-14
lines changed

‎packages/coreui-react/src/components/tabs/CTabList.tsx

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export interface CTabListProps extends HTMLAttributes<HTMLDivElement> {
1717
/**
1818
* Set the nav variant to tabs or pills.
1919
*/
20-
variant?:'pills'|'tabs'|'underline'|'underline-border'
20+
variant?:'enclosed'|'enclosed-pills'|'pills'|'tabs'|'underline'|'underline-border'
2121
}
2222

2323
exportconstCTabList=forwardRef<HTMLDivElement,CTabListProps>(
@@ -39,7 +39,7 @@ export const CTabList = forwardRef<HTMLDivElement, CTabListProps>(
3939
consttarget=event.targetasHTMLElement
4040
// eslint-disable-next-line unicorn/prefer-spread
4141
constitems:HTMLElement[]=Array.from(
42-
tabListRef.current.querySelectorAll('.nav-link:not(.disabled):not(:disabled)'),
42+
tabListRef.current.querySelectorAll('.nav-link:not(.disabled):not(:disabled)')
4343
)
4444

4545
letnextActiveElement
@@ -51,7 +51,7 @@ export const CTabList = forwardRef<HTMLDivElement, CTabListProps>(
5151
items,
5252
target,
5353
event.key==='ArrowDown'||event.key==='ArrowRight',
54-
true,
54+
true
5555
)
5656
}
5757

@@ -65,11 +65,12 @@ export const CTabList = forwardRef<HTMLDivElement, CTabListProps>(
6565
<div
6666
className={classNames(
6767
'nav',
68+
variant==='enclosed-pills'&&'nav-enclosed',// Enclosed pills variant required for `.nav-enclosed` class
6869
{
6970
[`nav-${layout}`]:layout,
7071
[`nav-${variant}`]:variant,
7172
},
72-
className,
73+
className
7374
)}
7475
role="tablist"
7576
onKeyDown={handleKeydown}
@@ -79,14 +80,21 @@ export const CTabList = forwardRef<HTMLDivElement, CTabListProps>(
7980
{children}
8081
</div>
8182
)
82-
},
83+
}
8384
)
8485

8586
CTabList.propTypes={
8687
children:PropTypes.node,
8788
className:PropTypes.string,
8889
layout:PropTypes.oneOf(['fill','justified']),
89-
variant:PropTypes.oneOf(['pills','tabs','underline','underline-border']),
90+
variant:PropTypes.oneOf([
91+
'enclosed',
92+
'enclosed-pills',
93+
'pills',
94+
'tabs',
95+
'underline',
96+
'underline-border',
97+
]),
9098
}
9199

92100
CTabList.displayName='CTabList'
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
importReactfrom'react'
2+
import{CTab,CTabContent,CTabList,CTabPanel,CTabs}from'@coreui/react'
3+
4+
exportconstTabsEnclosedExample=()=>{
5+
return(
6+
<CTabsdefaultActiveItemKey="profile">
7+
<CTabListvariant="enclosed">
8+
<CTabitemKey="home">Home</CTab>
9+
<CTabitemKey="profile">Profile</CTab>
10+
<CTabitemKey="contact">Contact</CTab>
11+
<CTabdisableditemKey="disabled">
12+
Disabled
13+
</CTab>
14+
</CTabList>
15+
<CTabContent>
16+
<CTabPanelclassName="p-3"itemKey="home">
17+
Home tab content
18+
</CTabPanel>
19+
<CTabPanelclassName="p-3"itemKey="profile">
20+
Profile tab content
21+
</CTabPanel>
22+
<CTabPanelclassName="p-3"itemKey="contact">
23+
Contact tab content
24+
</CTabPanel>
25+
<CTabPanelclassName="p-3"itemKey="disabled">
26+
Disabled tab content
27+
</CTabPanel>
28+
</CTabContent>
29+
</CTabs>
30+
)
31+
}
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
importReactfrom'react'
2+
import{CTab,CTabContent,CTabList,CTabPanel,CTabs}from'@coreui/react'
3+
4+
exportconstTabsEnclosedPillsExample=()=>{
5+
return(
6+
<CTabsdefaultActiveItemKey="profile">
7+
<CTabListvariant="enclosed-pills">
8+
<CTabitemKey="home">Home</CTab>
9+
<CTabitemKey="profile">Profile</CTab>
10+
<CTabitemKey="contact">Contact</CTab>
11+
<CTabdisableditemKey="disabled">
12+
Disabled
13+
</CTab>
14+
</CTabList>
15+
<CTabContent>
16+
<CTabPanelclassName="p-3"itemKey="home">
17+
Home tab content
18+
</CTabPanel>
19+
<CTabPanelclassName="p-3"itemKey="profile">
20+
Profile tab content
21+
</CTabPanel>
22+
<CTabPanelclassName="p-3"itemKey="contact">
23+
Contact tab content
24+
</CTabPanel>
25+
<CTabPanelclassName="p-3"itemKey="disabled">
26+
Disabled tab content
27+
</CTabPanel>
28+
</CTabContent>
29+
</CTabs>
30+
)
31+
}

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

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ since: 5.1.0
1010

1111
The basic React tabs example uses the`variant="tabs"` props to generate a tabbed interface.
1212

13-
<ExampleSnippetcomponent="TabsExample"componentName="ReactSpinner" />
13+
<ExampleSnippetcomponent="TabsExample"componentName="ReactTabs" />
1414

1515
##Available styles
1616

@@ -20,35 +20,47 @@ Change the style of `<CTabs>`'s component with modifiers and utilities. Mix and
2020

2121
If you don’t provide the`variant` prop, the component will default to a basic style.
2222

23-
<ExampleSnippetcomponent="TabsUnstyledExample"componentName="ReactSpinner" />
23+
<ExampleSnippetcomponent="TabsUnstyledExample"componentName="ReactTabs" />
2424

2525
###Pills
2626

2727
Take that same code, but use`variant="pills"` instead:
2828

29-
<ExampleSnippetcomponent="TabsPillsExample"componentName="ReactSpinner" />
29+
<ExampleSnippetcomponent="TabsPillsExample"componentName="ReactTabs" />
3030

3131
###Underline
3232

3333
Take that same code, but use`variant="underline"` instead:
3434

35-
<ExampleSnippetcomponent="TabsUnderlineExample"componentName="ReactSpinner" />
35+
<ExampleSnippetcomponent="TabsUnderlineExample"componentName="ReactTabs" />
3636

3737
###Underline border
3838

3939
Take that same code, but use`variant="underline-border"` instead:
4040

41-
<ExampleSnippetcomponent="TabsUnderlineBorderExample"componentName="React Spinner" />
41+
<ExampleSnippetcomponent="TabsUnderlineBorderExample"componentName="React Tabs" />
42+
43+
###Enclosed
44+
45+
Use the`variant="enclosed"` class to give your navigation items a subtle border and rounded styling.
46+
47+
<ExampleSnippetcomponent="TabsEnclosedExample"componentName="React Tabs" />
48+
49+
###Enclosed pills
50+
51+
Use the`variant="enclosed-pills"` to achieve a pill-style appearance for each nav item, using pill-shaped borders and smoother outlines.
52+
53+
<ExampleSnippetcomponent="TabsEnclosedPillsExample"componentName="React Tabs" />
4254

4355
###Fill and justify
4456

4557
Force your`<CTabs>`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space use`layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width.
4658

47-
<ExampleSnippetcomponent="TabsUnstyledFillAndJustifyExample"componentName="ReactSpinner" />
59+
<ExampleSnippetcomponent="TabsUnstyledFillAndJustifyExample"componentName="ReactTabs" />
4860

4961
For equal-width elements, use`layout="justified"`. All horizontal space will be occupied by nav links, but unlike the`layout="fill"` above, every nav item will be the same width.
5062

51-
<ExampleSnippetcomponent="TabsUnstyledFillAndJustify2Example"componentName="ReactSpinner" />
63+
<ExampleSnippetcomponent="TabsUnstyledFillAndJustify2Example"componentName="ReactTabs" />
5264

5365
Sure! Here's a polished, production-ready**documentation section** (Markdown-style) explaining the**controlled usage** of the`<CTabs>` component, with a clear example:
5466

@@ -68,7 +80,7 @@ This is useful when you need to synchronize the tab state with your application
6880

6981
>💡 If you prefer the tabs to manage their own state, use`defaultActiveItemKey` instead.
7082
71-
<ExampleSnippetcomponent="TabsControlledExample"componentName="ReactSpinner" />
83+
<ExampleSnippetcomponent="TabsControlledExample"componentName="ReactTabs" />
7284

7385

7486
##Accessibility

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp