Skip to content

Commit 33ed377

Browse files
mrholekmrholek
committed
feat: add new tabs component
1 parent ceedef2 commit 33ed377

File tree

3 files changed

+240
-0
lines changed

3 files changed

+240
-0
lines changed

‎src/_nav.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,11 @@ const _nav = [
117117
name: 'Tables',
118118
to: '/base/tables',
119119
},
120+
{
121+
component: CNavItem,
122+
name: 'Tabs',
123+
to: '/base/tabs',
124+
},
120125
{
121126
component: CNavItem,
122127
name: 'Tooltips',

‎src/routes.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const Placeholders = React.lazy(() => import('./views/base/placeholders/Placehol
1717
const Popovers = React.lazy(() => import('./views/base/popovers/Popovers'))
1818
const Progress = React.lazy(() => import('./views/base/progress/Progress'))
1919
const Spinners = React.lazy(() => import('./views/base/spinners/Spinners'))
20+
const Tabs = React.lazy(() => import('./views/base/tabs/Tabs'))
2021
const Tables = React.lazy(() => import('./views/base/tables/Tables'))
2122
const Tooltips = React.lazy(() => import('./views/base/tooltips/Tooltips'))
2223

@@ -69,6 +70,7 @@ const routes = [
6970
{ path: '/base/popovers', name: 'Popovers', element: Popovers },
7071
{ path: '/base/progress', name: 'Progress', element: Progress },
7172
{ path: '/base/spinners', name: 'Spinners', element: Spinners },
73+
{ path: '/base/tabs', name: 'Tabs', element: Tabs },
7274
{ path: '/base/tables', name: 'Tables', element: Tables },
7375
{ path: '/base/tooltips', name: 'Tooltips', element: Tooltips },
7476
{ path: '/buttons', name: 'Buttons', element: Buttons, exact: true },

‎src/views/base/tabs/Tabs.js‎

Lines changed: 233 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
import React from 'react'
2+
import {
3+
CRow,
4+
CCol,
5+
CCard,
6+
CCardBody,
7+
CCardHeader,
8+
CTab,
9+
CTabContent,
10+
CTabList,
11+
CTabPanel,
12+
CTabs,
13+
} from '@coreui/react'
14+
import { DocsExample } from 'src/components'
15+
16+
const Navs = () => {
17+
return (
18+
<CRow>
19+
<CCol xs={12}>
20+
<CCard className="mb-4">
21+
<CCardHeader>
22+
<strong>React Tabs</strong>
23+
</CCardHeader>
24+
<CCardBody>
25+
<p className="text-body-secondary small">
26+
The basic React tabs example uses the <code>variant=&#34;tabs&#34;</code> props to
27+
generate a tabbed interface.
28+
</p>
29+
<DocsExample href="components/tabs/#example">
30+
<CTabs activeItemKey="profile">
31+
<CTabList variant="tabs">
32+
<CTab itemKey="home">Home</CTab>
33+
<CTab itemKey="profile">Profile</CTab>
34+
<CTab itemKey="contact">Contact</CTab>
35+
<CTab disabled itemKey="disabled">
36+
Disabled
37+
</CTab>
38+
</CTabList>
39+
<CTabContent>
40+
<CTabPanel className="p-3" itemKey="home">
41+
Home tab content
42+
</CTabPanel>
43+
<CTabPanel className="p-3" itemKey="profile">
44+
Profile tab content
45+
</CTabPanel>
46+
<CTabPanel className="p-3" itemKey="contact">
47+
Contact tab content
48+
</CTabPanel>
49+
<CTabPanel className="p-3" itemKey="disabled">
50+
Disabled tab content
51+
</CTabPanel>
52+
</CTabContent>
53+
</CTabs>
54+
</DocsExample>
55+
</CCardBody>
56+
</CCard>
57+
</CCol>
58+
<CCol xs={12}>
59+
<CCard className="mb-4">
60+
<CCardHeader>
61+
<strong>React Tabs</strong> <small>Unstyled</small>
62+
</CCardHeader>
63+
<CCardBody>
64+
<p className="text-body-secondary small">
65+
If you don’t provide the <code>variant</code> prop, the component will default to a
66+
basic style.
67+
</p>
68+
<DocsExample href="components/tabs/#unstyled">
69+
<CTabs activeItemKey="profile">
70+
<CTabList>
71+
<CTab itemKey="home">Home</CTab>
72+
<CTab itemKey="profile">Profile</CTab>
73+
<CTab itemKey="contact">Contact</CTab>
74+
<CTab disabled itemKey="disabled">
75+
Disabled
76+
</CTab>
77+
</CTabList>
78+
<CTabContent>
79+
<CTabPanel className="p-3" itemKey="home">
80+
Home tab content
81+
</CTabPanel>
82+
<CTabPanel className="p-3" itemKey="profile">
83+
Profile tab content
84+
</CTabPanel>
85+
<CTabPanel className="p-3" itemKey="contact">
86+
Contact tab content
87+
</CTabPanel>
88+
<CTabPanel className="p-3" itemKey="disabled">
89+
Disabled tab content
90+
</CTabPanel>
91+
</CTabContent>
92+
</CTabs>
93+
</DocsExample>
94+
</CCardBody>
95+
</CCard>
96+
</CCol>
97+
<CCol xs={12}>
98+
<CCard className="mb-4">
99+
<CCardHeader>
100+
<strong>React Tabs</strong> <small>Pills</small>
101+
</CCardHeader>
102+
<CCardBody>
103+
<p className="text-body-secondary small">
104+
Take that same code, but use <code>variant=&#34;pills&#34;</code> instead:
105+
</p>
106+
<DocsExample href="components/tabs/#unstyled">
107+
<CTabs activeItemKey={2}>
108+
<CTabList variant="pills">
109+
<CTab aria-controls="home-tab-pane" itemKey={1}>
110+
Home
111+
</CTab>
112+
<CTab aria-controls="profile-tab-pane" itemKey={2}>
113+
Profile
114+
</CTab>
115+
<CTab aria-controls="contact-tab-pane" itemKey={3}>
116+
Contact
117+
</CTab>
118+
<CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>
119+
Disabled
120+
</CTab>
121+
</CTabList>
122+
<CTabContent>
123+
<CTabPanel className="p-3" aria-labelledby="home-tab-pane" itemKey={1}>
124+
Home tab content
125+
</CTabPanel>
126+
<CTabPanel className="p-3" aria-labelledby="profile-tab-pane" itemKey={2}>
127+
Profile tab content
128+
</CTabPanel>
129+
<CTabPanel className="p-3" aria-labelledby="contact-tab-pane" itemKey={3}>
130+
Contact tab content
131+
</CTabPanel>
132+
<CTabPanel className="p-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
133+
Disabled tab content
134+
</CTabPanel>
135+
</CTabContent>
136+
</CTabs>
137+
</DocsExample>
138+
</CCardBody>
139+
</CCard>
140+
</CCol>
141+
<CCol xs={12}>
142+
<CCard className="mb-4">
143+
<CCardHeader>
144+
<strong>React Tabs</strong> <small>Underline</small>
145+
</CCardHeader>
146+
<CCardBody>
147+
<p className="text-body-secondary small">
148+
Take that same code, but use <code>variant=&#34;underline&#34;</code> instead:
149+
</p>
150+
<DocsExample href="components/tabs/#unstyled">
151+
<CTabs activeItemKey={2}>
152+
<CTabList variant="underline">
153+
<CTab aria-controls="home-tab-pane" itemKey={1}>
154+
Home
155+
</CTab>
156+
<CTab aria-controls="profile-tab-pane" itemKey={2}>
157+
Profile
158+
</CTab>
159+
<CTab aria-controls="contact-tab-pane" itemKey={3}>
160+
Contact
161+
</CTab>
162+
<CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>
163+
Disabled
164+
</CTab>
165+
</CTabList>
166+
<CTabContent>
167+
<CTabPanel className="py-3" aria-labelledby="home-tab-pane" itemKey={1}>
168+
Home tab content
169+
</CTabPanel>
170+
<CTabPanel className="py-3" aria-labelledby="profile-tab-pane" itemKey={2}>
171+
Profile tab content
172+
</CTabPanel>
173+
<CTabPanel className="py-3" aria-labelledby="contact-tab-pane" itemKey={3}>
174+
Contact tab content
175+
</CTabPanel>
176+
<CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
177+
Disabled tab content
178+
</CTabPanel>
179+
</CTabContent>
180+
</CTabs>
181+
</DocsExample>
182+
</CCardBody>
183+
</CCard>
184+
</CCol>
185+
<CCol xs={12}>
186+
<CCard className="mb-4">
187+
<CCardHeader>
188+
<strong>React Tabs</strong> <small>Underline border</small>
189+
</CCardHeader>
190+
<CCardBody>
191+
<p className="text-body-secondary small">
192+
Take that same code, but use <code>variant=&#34;underline-border&#34;</code> instead:
193+
</p>
194+
<DocsExample href="components/tabs/#unstyled">
195+
<CTabs activeItemKey={2}>
196+
<CTabList variant="underline-border">
197+
<CTab aria-controls="home-tab-pane" itemKey={1}>
198+
Home
199+
</CTab>
200+
<CTab aria-controls="profile-tab-pane" itemKey={2}>
201+
Profile
202+
</CTab>
203+
<CTab aria-controls="contact-tab-pane" itemKey={3}>
204+
Contact
205+
</CTab>
206+
<CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>
207+
Disabled
208+
</CTab>
209+
</CTabList>
210+
<CTabContent>
211+
<CTabPanel className="py-3" aria-labelledby="home-tab-pane" itemKey={1}>
212+
Home tab content
213+
</CTabPanel>
214+
<CTabPanel className="py-3" aria-labelledby="profile-tab-pane" itemKey={2}>
215+
Profile tab content
216+
</CTabPanel>
217+
<CTabPanel className="py-3" aria-labelledby="contact-tab-pane" itemKey={3}>
218+
Contact tab content
219+
</CTabPanel>
220+
<CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
221+
Disabled tab content
222+
</CTabPanel>
223+
</CTabContent>
224+
</CTabs>
225+
</DocsExample>
226+
</CCardBody>
227+
</CCard>
228+
</CCol>
229+
</CRow>
230+
)
231+
}
232+
233+
export default Navs

0 commit comments

Comments
 (0)