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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy