coreui-free-react-admin-template

1
import React from 'react'
2
import { CCard, CCardBody, CCardHeader, CCol, CFormSelect, CRow } from '@coreui/react'
3
import { DocsExample } from 'src/components'
4

5
const Select = () => {
6
  return (
7
    <CRow>
8
      <CCol xs={12}>
9
        <CCard className="mb-4">
10
          <CCardHeader>
11
            <strong>React Select</strong> <small>Default</small>
12
          </CCardHeader>
13
          <CCardBody>
14
            <DocsExample href="forms/select">
15
              <CFormSelect aria-label="Default select example">
16
                <option>Open this select menu</option>
17
                <option value="1">One</option>
18
                <option value="2">Two</option>
19
                <option value="3">Three</option>
20
              </CFormSelect>
21
            </DocsExample>
22
          </CCardBody>
23
        </CCard>
24
      </CCol>
25
      <CCol xs={12}>
26
        <CCard className="mb-4">
27
          <CCardHeader>
28
            <strong>React Select</strong> <small>Sizing</small>
29
          </CCardHeader>
30
          <CCardBody>
31
            <p className="text-body-secondary small">
32
              You may also choose from small and large custom selects to match our similarly sized
33
              text inputs.
34
            </p>
35
            <DocsExample href="forms/select#sizing">
36
              <CFormSelect size="lg" className="mb-3" aria-label="Large select example">
37
                <option>Open this select menu</option>
38
                <option value="1">One</option>
39
                <option value="2">Two</option>
40
                <option value="3">Three</option>
41
              </CFormSelect>
42
              <CFormSelect size="sm" className="mb-3" aria-label="Small select example">
43
                <option>Open this select menu</option>
44
                <option value="1">One</option>
45
                <option value="2">Two</option>
46
                <option value="3">Three</option>
47
              </CFormSelect>
48
            </DocsExample>
49
            <p className="text-body-secondary small">
50
              The <code>multiple</code> attribute is also supported:
51
            </p>
52
            <DocsExample href="forms/select#sizing">
53
              <CFormSelect size="lg" multiple aria-label="Multiple select example">
54
                <option>Open this select menu</option>
55
                <option value="1">One</option>
56
                <option value="2">Two</option>
57
                <option value="3">Three</option>
58
              </CFormSelect>
59
            </DocsExample>
60
            <p className="text-body-secondary small">
61
              As is the <code>htmlSize</code> property:
62
            </p>
63
            <DocsExample href="forms/select#sizing">
64
              <CFormSelect size="lg" multiple aria-label="Multiple select example">
65
                <option>Open this select menu</option>
66
                <option value="1">One</option>
67
                <option value="2">Two</option>
68
                <option value="3">Three</option>
69
              </CFormSelect>
70
            </DocsExample>
71
          </CCardBody>
72
        </CCard>
73
      </CCol>
74
      <CCol xs={12}>
75
        <CCard className="mb-4">
76
          <CCardHeader>
77
            <strong>React Select</strong> <small>Disabled</small>
78
          </CCardHeader>
79
          <CCardBody>
80
            <p className="text-body-secondary small">
81
              Add the <code>disabled</code> boolean attribute on a select to give it a grayed out
82
              appearance and remove pointer events.
83
            </p>
84
            <DocsExample href="forms/select#disabled">
85
              <CFormSelect aria-label="Disabled select example" disabled>
86
                <option>Open this select menu</option>
87
                <option value="1">One</option>
88
                <option value="2">Two</option>
89
                <option value="3">Three</option>
90
              </CFormSelect>
91
            </DocsExample>
92
          </CCardBody>
93
        </CCard>
94
      </CCol>
95
    </CRow>
96
  )
97
}
98

99
export default Select
100