Skip to content

Commit 7826e36

Browse files
mrholekmrholek
committed
feat(CTabs): add enclosed variants
1 parent 5c26db6 commit 7826e36

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+
<CTabList variant="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+
<CTabList variant="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)