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

Commit7826e36

Browse files
committed
feat(CTabs): add enclosed variants
1 parent5c26db6 commit7826e36

File tree

3 files changed

+114
-7
lines changed

3 files changed

+114
-7
lines changed

‎packages/coreui-vue/src/components/tabs/CTabList.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,12 @@ const CTabList = defineComponent({
1818
/**
1919
* Set the nav variant to tabs or pills.
2020
*
21-
*@values 'pills', 'tabs', 'underline', 'underline-border'
21+
*@values 'enclosed', 'enclosed-pills', 'pills', 'tabs', 'underline', 'underline-border'
2222
*/
2323
variant:{
2424
type:String,
2525
validator:(value:string)=>{
26-
return['pills','tabs','underline','underline-border'].includes(value)
26+
return['enclosed','enclosed-pills','pills','tabs','underline','underline-border'].includes(value)
2727
},
2828
},
2929
},
@@ -72,6 +72,7 @@ const CTabList = defineComponent({
7272
{
7373
class:[
7474
'nav',
75+
props.variant==='enclosed-pills'&&'nav-enclosed',
7576
{
7677
[`nav-${props.layout}`]:props.layout,
7778
[`nav-${props.variant}`]:props.variant,

‎packages/docs/api/nav/CNav.api.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ import CNav from '@coreui/vue/src/components/nav/CNav'
88

99
####Props
1010

11-
| Prop name| Description| Type| Values| Default|
12-
| -----------| ---------------------------------------------------------------------------------------| ------| --------------------------------------------------------| -------|
13-
|**as**| Component used for the root node. Either a string to use a HTML element or a component.| string| -| 'ul'|
14-
|**layout**| Specify a layout type for component.| string|`'fill'`,`'justified'`| -|
15-
|**variant**| Set the nav variant to tabs or pills.| string|`'pills'`,`'tabs'`,`'underline'`,`'underline-border'`| -|
11+
| Prop name| Description| Type| Values| Default|
12+
| -----------| ---------------------------------------------------------------------------------------| ------| ------------------------------------------------------------------------------------------| -------|
13+
|**as**| Component used for the root node. Either a string to use a HTML element or a component.| string| -| 'ul'|
14+
|**layout**| Specify a layout type for component.| string|`'fill'`,`'justified'`| -|
15+
|**variant**| Set the nav variant to tabs or pills.| string|`'enclosed'`,`'enclosed-pills'`,`'pills'`,`'tabs'`,`'underline'`,`'underline-border'`| -|

‎packages/docs/components/tabs.md

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -275,6 +275,112 @@ Take that same code, but use `variant="underline-border"` instead:
275275
</CTabs>
276276
```
277277

278+
###Enclosed
279+
280+
Use the`variant="enclosed"` class to give your tab items a subtle border and rounded styling.
281+
282+
::: demo
283+
<CTabs:activeItemKey="1">
284+
<CTabListvariant="enclosed">
285+
<CTab aria-controls="home-tab-pane" :itemKey="1">Home</CTab>
286+
<CTab aria-controls="profile-tab-pane" :itemKey="2">Profile</CTab>
287+
<CTab aria-controls="contact-tab-pane" :itemKey="3">Contact</CTab>
288+
<CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
289+
</CTabList>
290+
<CTabContent>
291+
<CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
292+
Home tab content
293+
</CTabPanel>
294+
<CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
295+
Profile tab content
296+
</CTabPanel>
297+
<CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
298+
Contact tab content
299+
</CTabPanel>
300+
<CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
301+
Disabled tab content
302+
</CTabPanel>
303+
</CTabContent>
304+
</CTabs>
305+
:::
306+
```vue
307+
<CTabs :activeItemKey="1">
308+
<CTabList variant="enclosed-pills">
309+
<CTab aria-controls="home-tab-pane" :itemKey="1">Home</CTab>
310+
<CTab aria-controls="profile-tab-pane" :itemKey="2">Profile</CTab>
311+
<CTab aria-controls="contact-tab-pane" :itemKey="3">Contact</CTab>
312+
<CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
313+
</CTabList>
314+
<CTabContent>
315+
<CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
316+
Home tab content
317+
</CTabPanel>
318+
<CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
319+
Profile tab content
320+
</CTabPanel>
321+
<CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
322+
Contact tab content
323+
</CTabPanel>
324+
<CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
325+
Disabled tab content
326+
</CTabPanel>
327+
</CTabContent>
328+
</CTabs>
329+
```
330+
331+
###Enclosed pills
332+
333+
Use the`variant="enclosed-pills"` to achieve a pill-style appearance for each tab item, using pill-shaped borders and smoother outlines.
334+
335+
::: demo
336+
<CTabs:activeItemKey="1">
337+
<CTabListvariant="enclosed-pills">
338+
<CTab aria-controls="home-tab-pane" :itemKey="1">Home</CTab>
339+
<CTab aria-controls="profile-tab-pane" :itemKey="2">Profile</CTab>
340+
<CTab aria-controls="contact-tab-pane" :itemKey="3">Contact</CTab>
341+
<CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
342+
</CTabList>
343+
<CTabContent>
344+
<CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
345+
Home tab content
346+
</CTabPanel>
347+
<CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
348+
Profile tab content
349+
</CTabPanel>
350+
<CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
351+
Contact tab content
352+
</CTabPanel>
353+
<CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
354+
Disabled tab content
355+
</CTabPanel>
356+
</CTabContent>
357+
</CTabs>
358+
:::
359+
```vue
360+
<CTabs :activeItemKey="1">
361+
<CTabList variant="enclosed-pills">
362+
<CTab aria-controls="home-tab-pane" :itemKey="1">Home</CTab>
363+
<CTab aria-controls="profile-tab-pane" :itemKey="2">Profile</CTab>
364+
<CTab aria-controls="contact-tab-pane" :itemKey="3">Contact</CTab>
365+
<CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
366+
</CTabList>
367+
<CTabContent>
368+
<CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
369+
Home tab content
370+
</CTabPanel>
371+
<CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
372+
Profile tab content
373+
</CTabPanel>
374+
<CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
375+
Contact tab content
376+
</CTabPanel>
377+
<CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
378+
Disabled tab content
379+
</CTabPanel>
380+
</CTabContent>
381+
</CTabs>
382+
```
383+
278384
###Fill and justify
279385

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

0 commit comments

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