Skip to content

Commit 953c231

Browse files
mrholekmrholek
committed
feat: add new tabs component
1 parent 85c9e17 commit 953c231

File tree

3 files changed

+172
-0
lines changed

3 files changed

+172
-0
lines changed

‎src/_nav.js

+5
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,11 @@ export default [
100100
name: 'Tables',
101101
to: '/base/tables',
102102
},
103+
{
104+
component: 'CNavItem',
105+
name: 'Tabs',
106+
to: '/base/tabs',
107+
},
103108
{
104109
component: 'CNavItem',
105110
name: 'Tooltips',

‎src/router/index.js

+5
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,11 @@ const routes = [
111111
name: 'Tables',
112112
component: () => import('@/views/base/Tables.vue'),
113113
},
114+
{
115+
path: '/base/tabs',
116+
name: 'Tabs',
117+
component: () => import('@/views/base/Tabs.vue'),
118+
},
114119
{
115120
path: '/base/tooltips',
116121
name: 'Tooltips',

‎src/views/base/Tabs.vue

+162
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
<template>
2+
<CRow>
3+
<CCol :xs="12">
4+
<CCard class="mb-4">
5+
<CCardHeader>
6+
<strong>Vue Tabs</strong>
7+
</CCardHeader>
8+
<CCardBody>
9+
<p class="text-body-secondary small">
10+
The basic Vue tabs example uses the <code>variant=&#34;tabs&#34;</code> props to
11+
generate a tabbed interface.
12+
</p>
13+
<DocsExample href="components/tabs.html#example">
14+
<CTabs activeItemKey="profile">
15+
<CTabList variant="tabs">
16+
<CTab itemKey="home">Home</CTab>
17+
<CTab itemKey="profile">Profile</CTab>
18+
<CTab itemKey="contact">Contact</CTab>
19+
<CTab disabled itemKey="disabled"> Disabled </CTab>
20+
</CTabList>
21+
<CTabContent>
22+
<CTabPanel class="p-3" itemKey="home"> Home tab content </CTabPanel>
23+
<CTabPanel class="p-3" itemKey="profile"> Profile tab content </CTabPanel>
24+
<CTabPanel class="p-3" itemKey="contact"> Contact tab content </CTabPanel>
25+
<CTabPanel class="p-3" itemKey="disabled"> Disabled tab content </CTabPanel>
26+
</CTabContent>
27+
</CTabs>
28+
</DocsExample>
29+
</CCardBody>
30+
</CCard>
31+
</CCol>
32+
<CCol :xs="12">
33+
<CCard class="mb-4">
34+
<CCardHeader> <strong>Vue Tabs</strong> <small>Unstyled</small> </CCardHeader>
35+
<CCardBody>
36+
<p class="text-body-secondary small">
37+
If you don’t provide the <code>variant</code> prop, the component will default to a
38+
basic style.
39+
</p>
40+
<DocsExample href="components/tabs.html#unstyled">
41+
<CTabs activeItemKey="profile">
42+
<CTabList>
43+
<CTab itemKey="home">Home</CTab>
44+
<CTab itemKey="profile">Profile</CTab>
45+
<CTab itemKey="contact">Contact</CTab>
46+
<CTab disabled itemKey="disabled"> Disabled </CTab>
47+
</CTabList>
48+
<CTabContent>
49+
<CTabPanel class="p-3" itemKey="home"> Home tab content </CTabPanel>
50+
<CTabPanel class="p-3" itemKey="profile"> Profile tab content </CTabPanel>
51+
<CTabPanel class="p-3" itemKey="contact"> Contact tab content </CTabPanel>
52+
<CTabPanel class="p-3" itemKey="disabled"> Disabled tab content </CTabPanel>
53+
</CTabContent>
54+
</CTabs>
55+
</DocsExample>
56+
</CCardBody>
57+
</CCard>
58+
</CCol>
59+
<CCol :xs="12">
60+
<CCard class="mb-4">
61+
<CCardHeader> <strong>Vue Tabs</strong> <small>Pills</small> </CCardHeader>
62+
<CCardBody>
63+
<p class="text-body-secondary small">
64+
Take that same code, but use <code>variant=&#34;pills&#34;</code> instead:
65+
</p>
66+
<DocsExample href="components/tabs.html#unstyled">
67+
<CTabs :activeItemKey="2">
68+
<CTabList variant="pills">
69+
<CTab aria-controls="home-tab-pane" :itemKey="1"> Home </CTab>
70+
<CTab aria-controls="profile-tab-pane" :itemKey="2"> Profile </CTab>
71+
<CTab aria-controls="contact-tab-pane" :itemKey="3"> Contact </CTab>
72+
<CTab aria-controls="disabled-tab-pane" disabled :itemKey="4"> Disabled </CTab>
73+
</CTabList>
74+
<CTabContent>
75+
<CTabPanel class="p-3" aria-labelledby="home-tab-pane" :itemKey="1">
76+
Home tab content
77+
</CTabPanel>
78+
<CTabPanel class="p-3" aria-labelledby="profile-tab-pane" :itemKey="2">
79+
Profile tab content
80+
</CTabPanel>
81+
<CTabPanel class="p-3" aria-labelledby="contact-tab-pane" :itemKey="3">
82+
Contact tab content
83+
</CTabPanel>
84+
<CTabPanel class="p-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
85+
Disabled tab content
86+
</CTabPanel>
87+
</CTabContent>
88+
</CTabs>
89+
</DocsExample>
90+
</CCardBody>
91+
</CCard>
92+
</CCol>
93+
<CCol :xs="12">
94+
<CCard class="mb-4">
95+
<CCardHeader> <strong>Vue Tabs</strong> <small>Underline</small> </CCardHeader>
96+
<CCardBody>
97+
<p class="text-body-secondary small">
98+
Take that same code, but use <code>variant=&#34;underline&#34;</code> instead:
99+
</p>
100+
<DocsExample href="components/tabs.html#unstyled">
101+
<CTabs :activeItemKey="2">
102+
<CTabList variant="underline">
103+
<CTab aria-controls="home-tab-pane" :itemKey="1"> Home </CTab>
104+
<CTab aria-controls="profile-tab-pane" :itemKey="2"> Profile </CTab>
105+
<CTab aria-controls="contact-tab-pane" :itemKey="3"> Contact </CTab>
106+
<CTab aria-controls="disabled-tab-pane" disabled :itemKey="4"> Disabled </CTab>
107+
</CTabList>
108+
<CTabContent>
109+
<CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
110+
Home tab content
111+
</CTabPanel>
112+
<CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
113+
Profile tab content
114+
</CTabPanel>
115+
<CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
116+
Contact tab content
117+
</CTabPanel>
118+
<CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
119+
Disabled tab content
120+
</CTabPanel>
121+
</CTabContent>
122+
</CTabs>
123+
</DocsExample>
124+
</CCardBody>
125+
</CCard>
126+
</CCol>
127+
<CCol :xs="12">
128+
<CCard class="mb-4">
129+
<CCardHeader> <strong>Vue Tabs</strong> <small>Underline border</small> </CCardHeader>
130+
<CCardBody>
131+
<p class="text-body-secondary small">
132+
Take that same code, but use <code>variant=&#34;underline-border&#34;</code> instead:
133+
</p>
134+
<DocsExample href="components/tabs.html#unstyled">
135+
<CTabs :activeItemKey="2">
136+
<CTabList variant="underline-border">
137+
<CTab aria-controls="home-tab-pane" :itemKey="1"> Home </CTab>
138+
<CTab aria-controls="profile-tab-pane" :itemKey="2"> Profile </CTab>
139+
<CTab aria-controls="contact-tab-pane" :itemKey="3"> Contact </CTab>
140+
<CTab aria-controls="disabled-tab-pane" disabled :itemKey="4"> Disabled </CTab>
141+
</CTabList>
142+
<CTabContent>
143+
<CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
144+
Home tab content
145+
</CTabPanel>
146+
<CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
147+
Profile tab content
148+
</CTabPanel>
149+
<CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
150+
Contact tab content
151+
</CTabPanel>
152+
<CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
153+
Disabled tab content
154+
</CTabPanel>
155+
</CTabContent>
156+
</CTabs>
157+
</DocsExample>
158+
</CCardBody>
159+
</CCard>
160+
</CCol>
161+
</CRow>
162+
</template>

0 commit comments

Comments
 (0)