coreui-free-react-admin-template

1
import React from 'react'
2
import {
3
  CButton,
4
  CCard,
5
  CCardBody,
6
  CCardHeader,
7
  CCol,
8
  CForm,
9
  CFormCheck,
10
  CFormInput,
11
  CFormLabel,
12
  CFormSelect,
13
  CInputGroup,
14
  CInputGroupText,
15
  CRow,
16
} from '@coreui/react'
17
import { DocsExample } from 'src/components'
18

19
const Layout = () => {
20
  return (
21
    <CRow>
22
      <CCol xs={12}>
23
        <CCard className="mb-4">
24
          <CCardHeader>
25
            <strong>Layout</strong> <small>Form grid</small>
26
          </CCardHeader>
27
          <CCardBody>
28
            <p className="text-body-secondary small">
29
              More complex forms can be built using our grid classes. Use these for form layouts
30
              that require multiple columns, varied widths, and additional alignment options.
31
            </p>
32
            <DocsExample href="forms/layout#form-grid">
33
              <CRow>
34
                <CCol xs>
35
                  <CFormInput placeholder="First name" aria-label="First name" />
36
                </CCol>
37
                <CCol xs>
38
                  <CFormInput placeholder="Last name" aria-label="Last name" />
39
                </CCol>
40
              </CRow>
41
            </DocsExample>
42
          </CCardBody>
43
        </CCard>
44
      </CCol>
45
      <CCol xs={12}>
46
        <CCard className="mb-4">
47
          <CCardHeader>
48
            <strong>Layout</strong> <small>Gutters</small>
49
          </CCardHeader>
50
          <CCardBody>
51
            <p className="text-body-secondary small">
52
              By adding <a href="https://coreui.io/docs/layout/gutters/">gutter modifier classes</a>
53
              , you can have control over the gutter width in as well the inline as block direction.
54
            </p>
55
            <DocsExample href="forms/layout#gutters">
56
              <CRow className="g-3">
57
                <CCol xs>
58
                  <CFormInput placeholder="First name" aria-label="First name" />
59
                </CCol>
60
                <CCol xs>
61
                  <CFormInput placeholder="Last name" aria-label="Last name" />
62
                </CCol>
63
              </CRow>
64
            </DocsExample>
65
            <p className="text-body-secondary small">
66
              More complex layouts can also be created with the grid system.
67
            </p>
68
            <DocsExample href="forms/layout#gutters">
69
              <CForm className="row g-3">
70
                <CCol md={6}>
71
                  <CFormLabel htmlFor="inputEmail4">Email</CFormLabel>
72
                  <CFormInput type="email" id="inputEmail4" />
73
                </CCol>
74
                <CCol md={6}>
75
                  <CFormLabel htmlFor="inputPassword4">Password</CFormLabel>
76
                  <CFormInput type="password" id="inputPassword4" />
77
                </CCol>
78
                <CCol xs={12}>
79
                  <CFormLabel htmlFor="inputAddress">Address</CFormLabel>
80
                  <CFormInput id="inputAddress" placeholder="1234 Main St" />
81
                </CCol>
82
                <CCol xs={12}>
83
                  <CFormLabel htmlFor="inputAddress2">Address 2</CFormLabel>
84
                  <CFormInput id="inputAddress2" placeholder="Apartment, studio, or floor" />
85
                </CCol>
86
                <CCol md={6}>
87
                  <CFormLabel htmlFor="inputCity">City</CFormLabel>
88
                  <CFormInput id="inputCity" />
89
                </CCol>
90
                <CCol md={4}>
91
                  <CFormLabel htmlFor="inputState">State</CFormLabel>
92
                  <CFormSelect id="inputState">
93
                    <option>Choose...</option>
94
                    <option>...</option>
95
                  </CFormSelect>
96
                </CCol>
97
                <CCol md={2}>
98
                  <CFormLabel htmlFor="inputZip">Zip</CFormLabel>
99
                  <CFormInput id="inputZip" />
100
                </CCol>
101
                <CCol xs={12}>
102
                  <CFormCheck type="checkbox" id="gridCheck" label="Check me out" />
103
                </CCol>
104
                <CCol xs={12}>
105
                  <CButton color="primary" type="submit">
106
                    Sign in
107
                  </CButton>
108
                </CCol>
109
              </CForm>
110
            </DocsExample>
111
          </CCardBody>
112
        </CCard>
113
      </CCol>
114
      <CCol xs={12}>
115
        <CCard className="mb-4">
116
          <CCardHeader>
117
            <strong>Layout</strong> <small>Horizontal form</small>
118
          </CCardHeader>
119
          <CCardBody>
120
            <p className="text-body-secondary small">
121
              Create horizontal forms with the grid by adding the <code>.row</code> class to form
122
              groups and using the <code>.col-*-*</code> classes to specify the width of your labels
123
              and controls. Be sure to add <code>.col-form-label</code> to your{' '}
124
              <code>&lt;CFormLabel&gt;</code>s as well so they&#39;re vertically centered with their
125
              associated form controls.
126
            </p>
127
            <p className="text-body-secondary small">
128
              At times, you maybe need to use margin or padding utilities to create that perfect
129
              alignment you need. For example, we&#39;ve removed the <code>padding-top</code> on our
130
              stacked radio inputs label to better align the text baseline.
131
            </p>
132
            <DocsExample href="forms/layout#horizontal-form">
133
              <CForm>
134
                <CRow className="mb-3">
135
                  <CFormLabel htmlFor="inputEmail3" className="col-sm-2 col-form-label">
136
                    Email
137
                  </CFormLabel>
138
                  <CCol sm={10}>
139
                    <CFormInput type="email" id="inputEmail3" />
140
                  </CCol>
141
                </CRow>
142
                <CRow className="mb-3">
143
                  <CFormLabel htmlFor="inputPassword3" className="col-sm-2 col-form-label">
144
                    Password
145
                  </CFormLabel>
146
                  <CCol sm={10}>
147
                    <CFormInput type="password" id="inputPassword3" />
148
                  </CCol>
149
                </CRow>
150
                <fieldset className="row mb-3">
151
                  <legend className="col-form-label col-sm-2 pt-0">Radios</legend>
152
                  <CCol sm={10}>
153
                    <CFormCheck
154
                      type="radio"
155
                      name="gridRadios"
156
                      id="gridRadios1"
157
                      value="option1"
158
                      label="First radio"
159
                      defaultChecked
160
                    />
161
                    <CFormCheck
162
                      type="radio"
163
                      name="gridRadios"
164
                      id="gridRadios2"
165
                      value="option2"
166
                      label="Second radio"
167
                    />
168
                    <CFormCheck
169
                      type="radio"
170
                      name="gridRadios"
171
                      id="gridRadios3"
172
                      value="option3"
173
                      label="Third disabled radio"
174
                      disabled
175
                    />
176
                  </CCol>
177
                </fieldset>
178
                <CRow className="mb-3">
179
                  <div className="col-sm-10 offset-sm-2">
180
                    <CFormCheck type="checkbox" id="gridCheck1" label="Example checkbox" />
181
                  </div>
182
                </CRow>
183
                <CButton color="primary" type="submit">
184
                  Sign in
185
                </CButton>
186
              </CForm>
187
            </DocsExample>
188
          </CCardBody>
189
        </CCard>
190
      </CCol>
191
      <CCol xs={12}>
192
        <CCard className="mb-4">
193
          <CCardHeader>
194
            <strong>Layout</strong> <small>Horizontal form label sizing</small>
195
          </CCardHeader>
196
          <CCardBody>
197
            <p className="text-body-secondary small">
198
              Be sure to use <code>.col-form-label-sm</code> or <code>.col-form-label-lg</code> to
199
              your <code>&lt;CFormLabel&gt;</code>s or <code>&lt;legend&gt;</code>s to correctly
200
              follow the size of <code>.form-control-lg</code> and <code>.form-control-sm</code>.
201
            </p>
202
            <DocsExample href="forms/layout#horizontal-form-label-sizing">
203
              <CRow className="mb-3">
204
                <CFormLabel
205
                  htmlFor="colFormLabelSm"
206
                  className="col-sm-2 col-form-label col-form-label-sm"
207
                >
208
                  Email
209
                </CFormLabel>
210
                <CCol sm={10}>
211
                  <CFormInput
212
                    type="email"
213
                    className="form-control form-control-sm"
214
                    id="colFormLabelSm"
215
                    placeholder="col-form-label-sm"
216
                  />
217
                </CCol>
218
              </CRow>
219
              <CRow className="mb-3">
220
                <CFormLabel htmlFor="colFormLabel" className="col-sm-2 col-form-label">
221
                  Email
222
                </CFormLabel>
223
                <CCol sm={10}>
224
                  <CFormInput type="email" id="colFormLabel" placeholder="col-form-label" />
225
                </CCol>
226
              </CRow>
227
              <CRow>
228
                <CFormLabel
229
                  htmlFor="colFormLabelLg"
230
                  className="col-sm-2 col-form-label col-form-label-lg"
231
                >
232
                  Email
233
                </CFormLabel>
234
                <CCol sm={10}>
235
                  <CFormInput
236
                    type="email"
237
                    className="form-control form-control-lg"
238
                    id="colFormLabelLg"
239
                    placeholder="col-form-label-lg"
240
                  />
241
                </CCol>
242
              </CRow>
243
            </DocsExample>
244
          </CCardBody>
245
        </CCard>
246
      </CCol>
247
      <CCol xs={12}>
248
        <CCard className="mb-4">
249
          <CCardHeader>
250
            <strong>Layout</strong> <small>Column sizing</small>
251
          </CCardHeader>
252
          <CCardBody>
253
            <p className="text-body-secondary small">
254
              As shown in the previous examples, our grid system allows you to place any number of{' '}
255
              <code>&lt;CCol&gt;</code>s within a <code>&lt;CRow&gt;</code>. They&#39;ll split the
256
              available width equally between them. You may also pick a subset of your columns to
257
              take up more or less space, while the remaining <code>&lt;CCol&gt;</code>s equally
258
              split the rest, with specific column classes like{' '}
259
              <code>&lt;CCol sm=&#34;7&#34;&gt;</code>.
260
            </p>
261
            <DocsExample href="forms/layout#column-sizing">
262
              <CRow className="g-3">
263
                <CCol sm={7}>
264
                  <CFormInput placeholder="City" aria-label="City" />
265
                </CCol>
266
                <CCol sm>
267
                  <CFormInput placeholder="State" aria-label="State" />
268
                </CCol>
269
                <CCol sm>
270
                  <CFormInput placeholder="Zip" aria-label="Zip" />
271
                </CCol>
272
              </CRow>
273
            </DocsExample>
274
          </CCardBody>
275
        </CCard>
276
      </CCol>
277
      <CCol xs={12}>
278
        <CCard className="mb-4">
279
          <CCardHeader>
280
            <strong>Layout</strong> <small>Auto-sizing</small>
281
          </CCardHeader>
282
          <CCardBody>
283
            <p className="text-body-secondary small">
284
              The example below uses a flexbox utility to vertically center the contents and changes{' '}
285
              <code>&lt;CCol&gt;</code> to <code>&lt;CCol xs=&#34;auto&#34;&gt;</code> so that your
286
              columns only take up as much space as needed. Put another way, the column sizes itself
287
              based on the contents.
288
            </p>
289
            <DocsExample href="forms/layout#auto-sizing">
290
              <CForm className="row gy-2 gx-3 align-items-center">
291
                <CCol xs="auto">
292
                  <CFormLabel className="visually-hidden" htmlFor="autoSizingInput">
293
                    Name
294
                  </CFormLabel>
295
                  <CFormInput id="autoSizingInput" placeholder="Jane Doe" />
296
                </CCol>
297
                <CCol xs="auto">
298
                  <CFormLabel className="visually-hidden" htmlFor="autoSizingInputGroup">
299
                    Username
300
                  </CFormLabel>
301
                  <CInputGroup>
302
                    <CInputGroupText>@</CInputGroupText>
303
                    <CFormInput id="autoSizingInputGroup" placeholder="Username" />
304
                  </CInputGroup>
305
                </CCol>
306
                <CCol xs="auto">
307
                  <CFormLabel className="visually-hidden" htmlFor="autoSizingSelect">
308
                    Preference
309
                  </CFormLabel>
310
                  <CFormSelect id="autoSizingSelect">
311
                    <option>Choose...</option>
312
                    <option value="1">One</option>
313
                    <option value="2">Two</option>
314
                    <option value="3">Three</option>
315
                  </CFormSelect>
316
                </CCol>
317
                <CCol xs="auto">
318
                  <CFormCheck type="checkbox" id="autoSizingCheck" label="Remember me" />
319
                </CCol>
320
                <CCol xs="auto">
321
                  <CButton color="primary" type="submit">
322
                    Submit
323
                  </CButton>
324
                </CCol>
325
              </CForm>
326
            </DocsExample>
327
            <p className="text-body-secondary small">
328
              You can then remix that once again with size-specific column classes.
329
            </p>
330
            <DocsExample href="forms/layout#auto-sizing">
331
              <CForm className="row gx-3 gy-2 align-items-center">
332
                <CCol sm={3}>
333
                  <CFormLabel className="visually-hidden" htmlFor="specificSizeInputName">
334
                    Name
335
                  </CFormLabel>
336
                  <CFormInput id="specificSizeInputName" placeholder="Jane Doe" />
337
                </CCol>
338
                <CCol sm={3}>
339
                  <CFormLabel className="visually-hidden" htmlFor="specificSizeInputGroupUsername">
340
                    Username
341
                  </CFormLabel>
342
                  <CInputGroup>
343
                    <CInputGroupText>@</CInputGroupText>
344
                    <CFormInput id="specificSizeInputGroupUsername" placeholder="Username" />
345
                  </CInputGroup>
346
                </CCol>
347
                <CCol sm={3}>
348
                  <CFormLabel className="visually-hidden" htmlFor="specificSizeSelect">
349
                    Preference
350
                  </CFormLabel>
351
                  <CFormSelect id="specificSizeSelect">
352
                    <option>Choose...</option>
353
                    <option value="1">One</option>
354
                    <option value="2">Two</option>
355
                    <option value="3">Three</option>
356
                  </CFormSelect>
357
                </CCol>
358
                <CCol xs="auto">
359
                  <CFormCheck type="checkbox" id="autoSizingCheck2" label="Remember me" />
360
                </CCol>
361
                <CCol xs="auto">
362
                  <CButton color="primary" type="submit">
363
                    Submit
364
                  </CButton>
365
                </CCol>
366
              </CForm>
367
            </DocsExample>
368
          </CCardBody>
369
        </CCard>
370
      </CCol>
371
      <CCol xs={12}>
372
        <CCard className="mb-4">
373
          <CCardHeader>
374
            <strong>Layout</strong> <small>Inline forms</small>
375
          </CCardHeader>
376
          <CCardBody>
377
            <p className="text-body-secondary small">
378
              Use the <code>&lt;CCol xs=&#34;auto&#34;&gt;</code> class to create horizontal
379
              layouts. By adding{' '}
380
              <a href="https://coreui.io/docs/layout/gutters/">gutter modifier classes</a>, we will
381
              have gutters in horizontal and vertical directions. The{' '}
382
              <code>.align-items-center</code> aligns the form elements to the middle, making the{' '}
383
              <code>&lt;CFormCheck&gt;</code> align properly.
384
            </p>
385
            <DocsExample href="forms/layout#inline-forms">
386
              <CForm className="row row-cols-lg-auto g-3 align-items-center">
387
                <CCol xs={12}>
388
                  <CFormLabel className="visually-hidden" htmlFor="inlineFormInputGroupUsername">
389
                    Username
390
                  </CFormLabel>
391
                  <CInputGroup>
392
                    <CInputGroupText>@</CInputGroupText>
393
                    <CFormInput id="inlineFormInputGroupUsername" placeholder="Username" />
394
                  </CInputGroup>
395
                </CCol>
396
                <CCol xs={12}>
397
                  <CFormLabel className="visually-hidden" htmlFor="inlineFormSelectPref">
398
                    Preference
399
                  </CFormLabel>
400
                  <CFormSelect id="inlineFormSelectPref">
401
                    <option>Choose...</option>
402
                    <option value="1">One</option>
403
                    <option value="2">Two</option>
404
                    <option value="3">Three</option>
405
                  </CFormSelect>
406
                </CCol>
407
                <CCol xs={12}>
408
                  <CFormCheck type="checkbox" id="inlineFormCheck" label="Remember me" />
409
                </CCol>
410
                <CCol xs={12}>
411
                  <CButton color="primary" type="submit">
412
                    Submit
413
                  </CButton>
414
                </CCol>
415
              </CForm>
416
            </DocsExample>
417
          </CCardBody>
418
        </CCard>
419
      </CCol>
420
    </CRow>
421
  )
422
}
423

424
export default Layout
425