coreui-free-react-admin-template

Navs.js
397 строк · 14.3 Кб
Перенос по словам
1
import React from 'react'
2
import {
3
  CRow,
4
  CCol,
5
  CCard,
6
  CCardBody,
7
  CCardHeader,
8
  CDropdown,
9
  CDropdownItem,
10
  CDropdownMenu,
11
  CDropdownToggle,
12
  CNav,
13
  CNavItem,
14
  CNavLink,
15
} from '@coreui/react'
16
import { DocsExample } from 'src/components'
17

18
const Navs = () => {
19
  return (
20
    <CRow>
21
      <CCol xs={12}>
22
        <CCard className="mb-4">
23
          <CCardHeader>
24
            <strong>React Navs</strong> <small>Base navs</small>
25
          </CCardHeader>
26
          <CCardBody>
27
            <p className="text-body-secondary small">
28
              The base <code>.nav</code> component is built with flexbox and provide a strong
29
              foundation for building all types of navigation components. It includes some style
30
              overrides (for working with lists), some link padding for larger hit areas, and basic
31
              disabled styling.
32
            </p>
33
            <DocsExample href="components/nav#base-nav">
34
              <CNav>
35
                <CNavItem>
36
                  <CNavLink href="#" active>
37
                    Active
38
                  </CNavLink>
39
                </CNavItem>
40
                <CNavItem>
41
                  <CNavLink href="#">Link</CNavLink>
42
                </CNavItem>
43
                <CNavItem>
44
                  <CNavLink href="#">Link</CNavLink>
45
                </CNavItem>
46
                <CNavItem>
47
                  <CNavLink href="#" disabled>
48
                    Disabled
49
                  </CNavLink>
50
                </CNavItem>
51
              </CNav>
52
            </DocsExample>
53
            <p className="text-body-secondary small">
54
              Classes are used throughout, so your markup can be super flexible. Use{' '}
55
              <code>&lt;ul&gt;</code>s like above, <code>&lt;ol&gt;</code> if the order of your
56
              items is important, or roll your own with a <code>&lt;nav&gt;</code> element. Because
57
              the .nav uses display: flex, the nav links behave the same as nav items would, but
58
              without the extra markup.
59
            </p>
60
            <DocsExample href="components/nav#base-nav">
61
              <CNav as="nav">
62
                <CNavLink href="#" active>
63
                  Active
64
                </CNavLink>
65
                <CNavLink href="#">Link</CNavLink>
66
                <CNavLink href="#">Link</CNavLink>
67
                <CNavLink href="#" disabled>
68
                  Disabled
69
                </CNavLink>
70
              </CNav>
71
            </DocsExample>
72
          </CCardBody>
73
        </CCard>
74
      </CCol>
75
      <CCol xs={12}>
76
        <CCard className="mb-4">
77
          <CCardHeader>
78
            <strong>React Navs</strong> <small>Horizontal alignment</small>
79
          </CCardHeader>
80
          <CCardBody>
81
            <p className="text-body-secondary small">
82
              Change the horizontal alignment of your nav with{' '}
83
              <a href="https://coreui.io/docs/layout/grid/#horizontal-alignment">
84
                flexbox utilities
85
              </a>
86
              . By default, navs are left-aligned, but you can easily change them to center or right
87
              aligned.
88
            </p>
89
            <p className="text-body-secondary small">
90
              Centered with <code>.justify-content-center</code>:
91
            </p>
92
            <DocsExample href="components/nav#horizontal-alignment">
93
              <CNav className="justify-content-center">
94
                <CNavItem>
95
                  <CNavLink href="#" active>
96
                    Active
97
                  </CNavLink>
98
                </CNavItem>
99
                <CNavItem>
100
                  <CNavLink href="#">Link</CNavLink>
101
                </CNavItem>
102
                <CNavItem>
103
                  <CNavLink href="#">Link</CNavLink>
104
                </CNavItem>
105
                <CNavItem>
106
                  <CNavLink href="#" disabled>
107
                    Disabled
108
                  </CNavLink>
109
                </CNavItem>
110
              </CNav>
111
            </DocsExample>
112
            <p className="text-body-secondary small">
113
              Right-aligned with <code>.justify-content-end</code>:
114
            </p>
115
            <DocsExample href="components/nav#base-nav">
116
              <CNav className="justify-content-end">
117
                <CNavItem>
118
                  <CNavLink href="#" active>
119
                    Active
120
                  </CNavLink>
121
                </CNavItem>
122
                <CNavItem>
123
                  <CNavLink href="#">Link</CNavLink>
124
                </CNavItem>
125
                <CNavItem>
126
                  <CNavLink href="#">Link</CNavLink>
127
                </CNavItem>
128
                <CNavItem>
129
                  <CNavLink href="#" disabled>
130
                    Disabled
131
                  </CNavLink>
132
                </CNavItem>
133
              </CNav>
134
            </DocsExample>
135
          </CCardBody>
136
        </CCard>
137
      </CCol>
138
      <CCol xs={12}>
139
        <CCard className="mb-4">
140
          <CCardHeader>
141
            <strong>React Navs</strong> <small>Vertical</small>
142
          </CCardHeader>
143
          <CCardBody>
144
            <p className="text-body-secondary small">
145
              Stack your navigation by changing the flex item direction with the{' '}
146
              <code>.flex-column</code> utility. Need to stack them on some viewports but not
147
              others? Use the responsive versions (e.g., <code>.flex-sm-column</code>).
148
            </p>
149
            <DocsExample href="components/nav#vertical">
150
              <CNav className="flex-column">
151
                <CNavItem>
152
                  <CNavLink href="#" active>
153
                    Active
154
                  </CNavLink>
155
                </CNavItem>
156
                <CNavItem>
157
                  <CNavLink href="#">Link</CNavLink>
158
                </CNavItem>
159
                <CNavItem>
160
                  <CNavLink href="#">Link</CNavLink>
161
                </CNavItem>
162
                <CNavItem>
163
                  <CNavLink href="#" disabled>
164
                    Disabled
165
                  </CNavLink>
166
                </CNavItem>
167
              </CNav>
168
            </DocsExample>
169
          </CCardBody>
170
        </CCard>
171
      </CCol>
172
      <CCol xs={12}>
173
        <CCard className="mb-4">
174
          <CCardHeader>
175
            <strong>React Navs</strong> <small>Tabs</small>
176
          </CCardHeader>
177
          <CCardBody>
178
            <p className="text-body-secondary small">
179
              Takes the basic nav from above and adds the <code>variant=&#34;tabs&#34;</code> class
180
              to generate a tabbed interface
181
            </p>
182
            <DocsExample href="components/nav#tabs">
183
              <CNav variant="tabs">
184
                <CNavItem>
185
                  <CNavLink href="#" active>
186
                    Active
187
                  </CNavLink>
188
                </CNavItem>
189
                <CNavItem>
190
                  <CNavLink href="#">Link</CNavLink>
191
                </CNavItem>
192
                <CNavItem>
193
                  <CNavLink href="#">Link</CNavLink>
194
                </CNavItem>
195
                <CNavItem>
196
                  <CNavLink href="#" disabled>
197
                    Disabled
198
                  </CNavLink>
199
                </CNavItem>
200
              </CNav>
201
            </DocsExample>
202
          </CCardBody>
203
        </CCard>
204
      </CCol>
205
      <CCol xs={12}>
206
        <CCard className="mb-4">
207
          <CCardHeader>
208
            <strong>React Navs</strong> <small>Pills</small>
209
          </CCardHeader>
210
          <CCardBody>
211
            <p className="text-body-secondary small">
212
              Take that same HTML, but use <code>variant=&#34;pills&#34;</code> instead:
213
            </p>
214
            <DocsExample href="components/nav#pills">
215
              <CNav variant="pills">
216
                <CNavItem>
217
                  <CNavLink href="#" active>
218
                    Active
219
                  </CNavLink>
220
                </CNavItem>
221
                <CNavItem>
222
                  <CNavLink href="#">Link</CNavLink>
223
                </CNavItem>
224
                <CNavItem>
225
                  <CNavLink href="#">Link</CNavLink>
226
                </CNavItem>
227
                <CNavItem>
228
                  <CNavLink href="#" disabled>
229
                    Disabled
230
                  </CNavLink>
231
                </CNavItem>
232
              </CNav>
233
            </DocsExample>
234
          </CCardBody>
235
        </CCard>
236
      </CCol>
237
      <CCol xs={12}>
238
        <CCard className="mb-4">
239
          <CCardHeader>
240
            <strong>React Navs</strong> <small>Fill and justify</small>
241
          </CCardHeader>
242
          <CCardBody>
243
            <p className="text-body-secondary small">
244
              Force your <code>.nav</code>&#39;s contents to extend the full available width one of
245
              two modifier classes. To proportionately fill all available space with your{' '}
246
              <code>.nav-item</code>s, use <code>layout=&#34;fill&#34;</code>. Notice that all
247
              horizontal space is occupied, but not every nav item has the same width.
248
            </p>
249
            <DocsExample href="components/nav#fill-and-justify">
250
              <CNav variant="pills" layout="fill">
251
                <CNavItem>
252
                  <CNavLink href="#" active>
253
                    Active
254
                  </CNavLink>
255
                </CNavItem>
256
                <CNavItem>
257
                  <CNavLink href="#">Link</CNavLink>
258
                </CNavItem>
259
                <CNavItem>
260
                  <CNavLink href="#">Link</CNavLink>
261
                </CNavItem>
262
                <CNavItem>
263
                  <CNavLink href="#" disabled>
264
                    Disabled
265
                  </CNavLink>
266
                </CNavItem>
267
              </CNav>
268
            </DocsExample>
269
            <p className="text-body-secondary small">
270
              For equal-width elements, use <code>layout=&#34;justified&#34;</code>. All horizontal
271
              space will be occupied by nav links, but unlike the .nav-fill above, every nav item
272
              will be the same width.
273
            </p>
274
            <DocsExample href="components/nav#fill-and-justify">
275
              <CNav variant="pills" layout="justified">
276
                <CNavItem>
277
                  <CNavLink href="#" active>
278
                    Active
279
                  </CNavLink>
280
                </CNavItem>
281
                <CNavItem>
282
                  <CNavLink href="#">Link</CNavLink>
283
                </CNavItem>
284
                <CNavItem>
285
                  <CNavLink href="#">Link</CNavLink>
286
                </CNavItem>
287
                <CNavItem>
288
                  <CNavLink href="#" disabled>
289
                    Disabled
290
                  </CNavLink>
291
                </CNavItem>
292
              </CNav>
293
            </DocsExample>
294
          </CCardBody>
295
        </CCard>
296
      </CCol>
297
      <CCol xs={12}>
298
        <CCard className="mb-4">
299
          <CCardHeader>
300
            <strong>React Navs</strong> <small>Working with flex utilities</small>
301
          </CCardHeader>
302
          <CCardBody>
303
            <p className="text-body-secondary small">
304
              If you need responsive nav variations, consider using a series of{' '}
305
              <a href="https://coreui.io/docs/utilities/flex">flexbox utilities</a>. While more
306
              verbose, these utilities offer greater customization across responsive breakpoints. In
307
              the example below, our nav will be stacked on the lowest breakpoint, then adapt to a
308
              horizontal layout that fills the available width starting from the small breakpoint.
309
            </p>
310
            <DocsExample href="components/nav#working-with-flex-utilities">
311
              <CNav as="nav" variant="pills" className="flex-column flex-sm-row">
312
                <CNavLink href="#" active>
313
                  Active
314
                </CNavLink>
315
                <CNavLink href="#">Link</CNavLink>
316
                <CNavLink href="#">Link</CNavLink>
317
                <CNavLink href="#" disabled>
318
                  Disabled
319
                </CNavLink>
320
              </CNav>
321
            </DocsExample>
322
          </CCardBody>
323
        </CCard>
324
      </CCol>
325
      <CCol xs={12}>
326
        <CCard className="mb-4">
327
          <CCardHeader>
328
            <strong>React Navs</strong> <small>Tabs with dropdowns</small>
329
          </CCardHeader>
330
          <CCardBody>
331
            <DocsExample href="components/nav#tabs-with-dropdowns">
332
              <CNav>
333
                <CNavItem>
334
                  <CNavLink href="#" active>
335
                    Active
336
                  </CNavLink>
337
                </CNavItem>
338
                <CDropdown variant="nav-item">
339
                  <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
340
                  <CDropdownMenu>
341
                    <CDropdownItem href="#">Action</CDropdownItem>
342
                    <CDropdownItem href="#">Another action</CDropdownItem>
343
                    <CDropdownItem href="#">Something else here</CDropdownItem>
344
                  </CDropdownMenu>
345
                </CDropdown>
346
                <CNavItem>
347
                  <CNavLink href="#">Link</CNavLink>
348
                </CNavItem>
349
                <CNavItem>
350
                  <CNavLink href="#" disabled>
351
                    Disabled
352
                  </CNavLink>
353
                </CNavItem>
354
              </CNav>
355
            </DocsExample>
356
          </CCardBody>
357
        </CCard>
358
      </CCol>
359
      <CCol xs={12}>
360
        <CCard className="mb-4">
361
          <CCardHeader>
362
            <strong>React Navs</strong> <small>Pills with dropdowns</small>
363
          </CCardHeader>
364
          <CCardBody>
365
            <DocsExample href="components/nav#pills-with-dropdowns">
366
              <CNav variant="pills">
367
                <CNavItem>
368
                  <CNavLink href="#" active>
369
                    Active
370
                  </CNavLink>
371
                </CNavItem>
372
                <CDropdown variant="nav-item">
373
                  <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
374
                  <CDropdownMenu>
375
                    <CDropdownItem href="#">Action</CDropdownItem>
376
                    <CDropdownItem href="#">Another action</CDropdownItem>
377
                    <CDropdownItem href="#">Something else here</CDropdownItem>
378
                  </CDropdownMenu>
379
                </CDropdown>
380
                <CNavItem>
381
                  <CNavLink href="#">Link</CNavLink>
382
                </CNavItem>
383
                <CNavItem>
384
                  <CNavLink href="#" disabled>
385
                    Disabled
386
                  </CNavLink>
387
                </CNavItem>
388
              </CNav>
389
            </DocsExample>
390
          </CCardBody>
391
        </CCard>
392
      </CCol>
393
    </CRow>
394
  )
395
}
396

397
export default Navs
398
coreui-free-react-admin-template

Использование cookies
