coreui-free-react-admin-template

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
234