coreui-free-react-admin-template

1
import React from 'react'
2
import {
3
  CButton,
4
  CButtonGroup,
5
  CCard,
6
  CCardBody,
7
  CCardHeader,
8
  CCol,
9
  CDropdown,
10
  CDropdownDivider,
11
  CDropdownItem,
12
  CDropdownMenu,
13
  CDropdownToggle,
14
  CRow,
15
} from '@coreui/react'
16
import { DocsExample } from 'src/components'
17

18
const Dropdowns = () => {
19
  return (
20
    <CRow>
21
      <CCol xs={12}>
22
        <CCard className="mb-4">
23
          <CCardHeader>
24
            <strong>React Dropdown</strong> <small>Single button</small>
25
          </CCardHeader>
26
          <CCardBody>
27
            <p className="text-body-secondary small">
28
              Here&#39;s how you can put them to work with either <code>&lt;button&gt;</code>{' '}
29
              elements:
30
            </p>
31
            <DocsExample href="components/dropdown#single-button">
32
              <CDropdown>
33
                <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
34
                <CDropdownMenu>
35
                  <CDropdownItem href="#">Action</CDropdownItem>
36
                  <CDropdownItem href="#">Another action</CDropdownItem>
37
                  <CDropdownItem href="#">Something else here</CDropdownItem>
38
                </CDropdownMenu>
39
              </CDropdown>
40
            </DocsExample>
41
            <p className="text-body-secondary small">
42
              The best part is you can do this with any button variant, too:
43
            </p>
44
            <DocsExample href="components/dropdown#single-button">
45
              <>
46
                {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map(
47
                  (color, index) => (
48
                    <CDropdown variant="btn-group" key={index}>
49
                      <CDropdownToggle color={color}>{color}</CDropdownToggle>
50
                      <CDropdownMenu>
51
                        <CDropdownItem href="#">Action</CDropdownItem>
52
                        <CDropdownItem href="#">Another action</CDropdownItem>
53
                        <CDropdownItem href="#">Something else here</CDropdownItem>
54
                        <CDropdownDivider />
55
                        <CDropdownItem href="#">Separated link</CDropdownItem>
56
                      </CDropdownMenu>
57
                    </CDropdown>
58
                  ),
59
                )}
60
              </>
61
            </DocsExample>
62
          </CCardBody>
63
        </CCard>
64
      </CCol>
65
      <CCol xs={12}>
66
        <CCard className="mb-4">
67
          <CCardHeader>
68
            <strong>React Dropdown</strong> <small>Split button</small>
69
          </CCardHeader>
70
          <CCardBody>
71
            <p className="text-body-secondary small">
72
              Similarly, create split button dropdowns with virtually the same markup as single
73
              button dropdowns, but with the addition of boolean prop <code>split</code> for proper
74
              spacing around the dropdown caret.
75
            </p>
76
            <p className="text-body-secondary small">
77
              We use this extra class to reduce the horizontal <code>padding</code> on either side
78
              of the caret by 25% and remove the <code>margin-left</code> that&#39;s attached for
79
              normal button dropdowns. Those additional changes hold the caret centered in the split
80
              button and implement a more properly sized hit area next to the main button.
81
            </p>
82
            <DocsExample href="components/dropdown#split-button">
83
              <>
84
                {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map(
85
                  (color, index) => (
86
                    <CDropdown variant="btn-group" key={index}>
87
                      <CButton color={color}>{color}</CButton>
88
                      <CDropdownToggle color={color} split />
89
                      <CDropdownMenu>
90
                        <CDropdownItem href="#">Action</CDropdownItem>
91
                        <CDropdownItem href="#">Another action</CDropdownItem>
92
                        <CDropdownItem href="#">Something else here</CDropdownItem>
93
                        <CDropdownDivider />
94
                        <CDropdownItem href="#">Separated link</CDropdownItem>
95
                      </CDropdownMenu>
96
                    </CDropdown>
97
                  ),
98
                )}
99
              </>
100
            </DocsExample>
101
          </CCardBody>
102
        </CCard>
103
      </CCol>
104
      <CCol xs={12}>
105
        <CCard className="mb-4">
106
          <CCardHeader>
107
            <strong>React Dropdown</strong> <small>Sizing</small>
108
          </CCardHeader>
109
          <CCardBody>
110
            <p className="text-body-secondary small">
111
              Button dropdowns work with buttons of all sizes, including default and split dropdown
112
              buttons.
113
            </p>
114
            <DocsExample href="components/dropdown#sizing">
115
              <CDropdown variant="btn-group">
116
                <CDropdownToggle color="secondary" size="lg">
117
                  Large button
118
                </CDropdownToggle>
119
                <CDropdownMenu>
120
                  <CDropdownItem href="#">Action</CDropdownItem>
121
                  <CDropdownItem href="#">Another action</CDropdownItem>
122
                  <CDropdownItem href="#">Something else here</CDropdownItem>
123
                  <CDropdownDivider />
124
                  <CDropdownItem href="#">Separated link</CDropdownItem>
125
                </CDropdownMenu>
126
              </CDropdown>
127
              <CDropdown variant="btn-group">
128
                <CButton color="secondary" size="lg">
129
                  Large split button
130
                </CButton>
131
                <CDropdownToggle color="secondary" size="lg" split />
132
                <CDropdownMenu>
133
                  <CDropdownItem href="#">Action</CDropdownItem>
134
                  <CDropdownItem href="#">Another action</CDropdownItem>
135
                  <CDropdownItem href="#">Something else here</CDropdownItem>
136
                  <CDropdownDivider />
137
                  <CDropdownItem href="#">Separated link</CDropdownItem>
138
                </CDropdownMenu>
139
              </CDropdown>
140
            </DocsExample>
141
            <DocsExample href="components/dropdown#sizing">
142
              <CDropdown variant="btn-group">
143
                <CDropdownToggle color="secondary" size="sm">
144
                  Small button
145
                </CDropdownToggle>
146
                <CDropdownMenu>
147
                  <CDropdownItem href="#">Action</CDropdownItem>
148
                  <CDropdownItem href="#">Another action</CDropdownItem>
149
                  <CDropdownItem href="#">Something else here</CDropdownItem>
150
                  <CDropdownDivider />
151
                  <CDropdownItem href="#">Separated link</CDropdownItem>
152
                </CDropdownMenu>
153
              </CDropdown>
154
              <CDropdown variant="btn-group">
155
                <CButton color="secondary" size="sm">
156
                  Small split button
157
                </CButton>
158
                <CDropdownToggle color="secondary" size="sm" split />
159
                <CDropdownMenu>
160
                  <CDropdownItem href="#">Action</CDropdownItem>
161
                  <CDropdownItem href="#">Another action</CDropdownItem>
162
                  <CDropdownItem href="#">Something else here</CDropdownItem>
163
                  <CDropdownDivider />
164
                  <CDropdownItem href="#">Separated link</CDropdownItem>
165
                </CDropdownMenu>
166
              </CDropdown>
167
            </DocsExample>
168
          </CCardBody>
169
        </CCard>
170
      </CCol>
171
      <CCol xs={12}>
172
        <CCard className="mb-4">
173
          <CCardHeader>
174
            <strong>React Dropdown</strong> <small>Single button</small>
175
          </CCardHeader>
176
          <CCardBody>
177
            <p className="text-body-secondary small">
178
              Opt into darker dropdowns to match a dark navbar or custom style by set{' '}
179
              <code>dark</code> property. No changes are required to the dropdown items.
180
            </p>
181
            <DocsExample href="components/dropdown#dark-dropdowns">
182
              <CDropdown dark>
183
                <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
184
                <CDropdownMenu>
185
                  <CDropdownItem href="#">Action</CDropdownItem>
186
                  <CDropdownItem href="#">Another action</CDropdownItem>
187
                  <CDropdownItem href="#">Something else here</CDropdownItem>
188
                  <CDropdownDivider />
189
                  <CDropdownItem href="#">Separated link</CDropdownItem>
190
                </CDropdownMenu>
191
              </CDropdown>
192
            </DocsExample>
193
            <p className="text-body-secondary small">And putting it to use in a navbar:</p>
194
            <DocsExample href="components/dropdown#dark-dropdowns">
195
              <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
196
                <div className="container-fluid">
197
                  <a className="navbar-brand" href="https://coreui.io/react/">
198
                    Navbar
199
                  </a>
200
                  <button
201
                    className="navbar-toggler"
202
                    type="button"
203
                    data-coreui-toggle="collapse"
204
                    data-coreui-target="#navbarNavDarkDropdown"
205
                    aria-controls="navbarNavDarkDropdown"
206
                    aria-expanded="false"
207
                    aria-label="Toggle navigation"
208
                  >
209
                    <span className="navbar-toggler-icon"></span>
210
                  </button>
211
                  <div className="collapse navbar-collapse" id="navbarNavDarkDropdown">
212
                    <ul className="navbar-nav">
213
                      <CDropdown dark as="li" variant="nav-item">
214
                        <CDropdownToggle>Dropdown</CDropdownToggle>
215
                        <CDropdownMenu>
216
                          <CDropdownItem href="#">Action</CDropdownItem>
217
                          <CDropdownItem href="#">Another action</CDropdownItem>
218
                          <CDropdownItem href="#">Something else here</CDropdownItem>
219
                          <CDropdownDivider />
220
                          <CDropdownItem href="#">Separated link</CDropdownItem>
221
                        </CDropdownMenu>
222
                      </CDropdown>
223
                    </ul>
224
                  </div>
225
                </div>
226
              </nav>
227
            </DocsExample>
228
          </CCardBody>
229
        </CCard>
230
      </CCol>
231
      <CCol xs={12}>
232
        <CCard className="mb-4">
233
          <CCardHeader>
234
            <strong>React Dropdown</strong> <small>Dropup</small>
235
          </CCardHeader>
236
          <CCardBody>
237
            <p className="text-body-secondary small">
238
              Trigger dropdown menus above elements by adding{' '}
239
              <code>direction=&#34;dropup&#34;</code> to the <code>&lt;CDropdown&gt;</code>{' '}
240
              component.
241
            </p>
242
            <DocsExample href="components/dropdown#dropup">
243
              <CDropdown variant="btn-group" direction="dropup">
244
                <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
245
                <CDropdownMenu>
246
                  <CDropdownItem href="#">Action</CDropdownItem>
247
                  <CDropdownItem href="#">Another action</CDropdownItem>
248
                  <CDropdownItem href="#">Something else here</CDropdownItem>
249
                  <CDropdownDivider />
250
                  <CDropdownItem href="#">Separated link</CDropdownItem>
251
                </CDropdownMenu>
252
              </CDropdown>
253
              <CDropdown variant="btn-group" direction="dropup">
254
                <CButton color="secondary">Small split button</CButton>
255
                <CDropdownToggle color="secondary" split />
256
                <CDropdownMenu>
257
                  <CDropdownItem href="#">Action</CDropdownItem>
258
                  <CDropdownItem href="#">Another action</CDropdownItem>
259
                  <CDropdownItem href="#">Something else here</CDropdownItem>
260
                  <CDropdownDivider />
261
                  <CDropdownItem href="#">Separated link</CDropdownItem>
262
                </CDropdownMenu>
263
              </CDropdown>
264
            </DocsExample>
265
          </CCardBody>
266
        </CCard>
267
      </CCol>
268
      <CCol xs={12}>
269
        <CCard className="mb-4">
270
          <CCardHeader>
271
            <strong>React Dropdown</strong> <small>Dropright</small>
272
          </CCardHeader>
273
          <CCardBody>
274
            <p className="text-body-secondary small">
275
              Trigger dropdown menus at the right of the elements by adding{' '}
276
              <code>direction=&#34;dropend&#34;</code> to the <code>&lt;CDropdown&gt;</code>{' '}
277
              component.
278
            </p>
279
            <DocsExample href="components/dropdown#dropright">
280
              <CDropdown variant="btn-group" direction="dropend">
281
                <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
282
                <CDropdownMenu>
283
                  <CDropdownItem href="#">Action</CDropdownItem>
284
                  <CDropdownItem href="#">Another action</CDropdownItem>
285
                  <CDropdownItem href="#">Something else here</CDropdownItem>
286
                  <CDropdownDivider />
287
                  <CDropdownItem href="#">Separated link</CDropdownItem>
288
                </CDropdownMenu>
289
              </CDropdown>
290
              <CDropdown variant="btn-group" direction="dropend">
291
                <CButton color="secondary">Small split button</CButton>
292
                <CDropdownToggle color="secondary" split />
293
                <CDropdownMenu>
294
                  <CDropdownItem href="#">Action</CDropdownItem>
295
                  <CDropdownItem href="#">Another action</CDropdownItem>
296
                  <CDropdownItem href="#">Something else here</CDropdownItem>
297
                  <CDropdownDivider />
298
                  <CDropdownItem href="#">Separated link</CDropdownItem>
299
                </CDropdownMenu>
300
              </CDropdown>
301
            </DocsExample>
302
          </CCardBody>
303
        </CCard>
304
      </CCol>
305
      <CCol xs={12}>
306
        <CCard className="mb-4">
307
          <CCardHeader>
308
            <strong>React Dropdown</strong> <small>Dropleft</small>
309
          </CCardHeader>
310
          <CCardBody>
311
            <p className="text-body-secondary small">
312
              Trigger dropdown menus at the left of the elements by adding{' '}
313
              <code>direction=&#34;dropstart&#34;</code> to the <code>&lt;CDropdown&gt;</code>{' '}
314
              component.
315
            </p>
316
            <DocsExample href="components/dropdown#dropleft">
317
              <CButtonGroup>
318
                <CDropdown variant="btn-group" direction="dropstart">
319
                  <CDropdownToggle color="secondary" split />
320
                  <CDropdownMenu>
321
                    <CDropdownItem href="#">Action</CDropdownItem>
322
                    <CDropdownItem href="#">Another action</CDropdownItem>
323
                    <CDropdownItem href="#">Something else here</CDropdownItem>
324
                    <CDropdownDivider />
325
                    <CDropdownItem href="#">Separated link</CDropdownItem>
326
                  </CDropdownMenu>
327
                </CDropdown>
328
                <CButton color="secondary">Small split button</CButton>
329
              </CButtonGroup>
330
            </DocsExample>
331
          </CCardBody>
332
        </CCard>
333
      </CCol>
334
    </CRow>
335
  )
336
}
337

338
export default Dropdowns
339