coreui-free-react-admin-template

1
import React from 'react'
2
import {
3
  CCard,
4
  CCardBody,
5
  CCardHeader,
6
  CCol,
7
  CFormInput,
8
  CFormLabel,
9
  CFormFloating,
10
  CFormSelect,
11
  CFormTextarea,
12
  CRow,
13
} from '@coreui/react'
14
import { DocsExample } from 'src/components'
15

16
const FloatingLabels = () => {
17
  return (
18
    <CRow>
19
      <CCol xs={12}>
20
        <CCard className="mb-4">
21
          <CCardHeader>
22
            <strong>React Floating labels</strong>
23
          </CCardHeader>
24
          <CCardBody>
25
            <p className="text-body-secondary small">
26
              Wrap a pair of <code>&lt;CFormInput&gt;</code> and <code>&lt;CFormLabel&gt;</code>{' '}
27
              elements in <code>CFormFloating</code> to enable floating labels with textual form
28
              fields. A <code>placeholder</code> is required on each <code>&lt;CFormInput&gt;</code>{' '}
29
              as our method of CSS-only floating labels uses the <code>:placeholder-shown</code>{' '}
30
              pseudo-element. Also note that the <code>&lt;CFormInput&gt;</code> must come first so
31
              we can utilize a sibling selector (e.g., <code>~</code>).
32
            </p>
33
            <DocsExample href="forms/floating-labels">
34
              <CFormFloating className="mb-3">
35
                <CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
36
                <CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
37
              </CFormFloating>
38
              <CFormFloating>
39
                <CFormInput type="password" id="floatingPassword" placeholder="Password" />
40
                <CFormLabel htmlFor="floatingPassword">Password</CFormLabel>
41
              </CFormFloating>
42
            </DocsExample>
43
            <p className="text-body-secondary small">
44
              When there&#39;s a <code>value</code> already defined, <code>&lt;CFormLabel&gt;</code>
45
              s will automatically adjust to their floated position.
46
            </p>
47
            <DocsExample href="forms/floating-labels">
48
              <CFormFloating>
49
                <CFormInput
50
                  type="email"
51
                  id="floatingInputValue"
52
                  placeholder="name@example.com"
53
                  defaultValue="test@example.com"
54
                />
55
                <CFormLabel htmlFor="floatingInputValue">Input with value</CFormLabel>
56
              </CFormFloating>
57
            </DocsExample>
58
          </CCardBody>
59
        </CCard>
60
      </CCol>
61
      <CCol xs={12}>
62
        <CCard className="mb-4">
63
          <CCardHeader>
64
            <strong>React Floating labels</strong> <small>Textareas</small>
65
          </CCardHeader>
66
          <CCardBody>
67
            <p className="text-body-secondary small">
68
              By default, <code>&lt;CFormTextarea&gt;</code>s will be the same height as{' '}
69
              <code>&lt;CFormInput&gt;</code>s.
70
            </p>
71
            <DocsExample href="forms/floating-labels#textareas">
72
              <CFormFloating>
73
                <CFormTextarea
74
                  id="floatingTextarea"
75
                  placeholder="Leave a comment here"
76
                ></CFormTextarea>
77
                <CFormLabel htmlFor="floatingTextarea">Comments</CFormLabel>
78
              </CFormFloating>
79
            </DocsExample>
80
            <p className="text-body-secondary small">
81
              To set a custom height on your <code>&lt;CFormTextarea;&gt;</code>, do not use the{' '}
82
              <code>rows</code> attribute. Instead, set an explicit <code>height</code> (either
83
              inline or via custom CSS).
84
            </p>
85
            <DocsExample href="forms/floating-labels#textareas">
86
              <CFormFloating>
87
                <CFormTextarea
88
                  placeholder="Leave a comment here"
89
                  id="floatingTextarea2"
90
                  style={{ height: '100px' }}
91
                ></CFormTextarea>
92
                <CFormLabel htmlFor="floatingTextarea2">Comments</CFormLabel>
93
              </CFormFloating>
94
            </DocsExample>
95
          </CCardBody>
96
        </CCard>
97
      </CCol>
98
      <CCol xs={12}>
99
        <CCard className="mb-4">
100
          <CCardHeader>
101
            <strong>React Floating labels</strong> <small>Selects</small>
102
          </CCardHeader>
103
          <CCardBody>
104
            <p className="text-body-secondary small">
105
              Other than <code>&lt;CFormInput&gt;</code>, floating labels are only available on{' '}
106
              <code>&lt;CFormSelect&gt;</code>s. They work in the same way, but unlike{' '}
107
              <code>&lt;CFormInput&gt;</code>s, they&#39;ll always show the{' '}
108
              <code>&lt;CFormLabel&gt;</code> in its floated state.{' '}
109
              <strong>
110
                Selects with <code>size</code> and <code>multiple</code> are not supported.
111
              </strong>
112
            </p>
113
            <DocsExample href="forms/floating-labels#selects">
114
              <CFormFloating>
115
                <CFormSelect id="floatingSelect" aria-label="Floating label select example">
116
                  <option>Open this select menu</option>
117
                  <option value="1">One</option>
118
                  <option value="2">Two</option>
119
                  <option value="3">Three</option>
120
                </CFormSelect>
121
                <CFormLabel htmlFor="floatingSelect">Works with selects</CFormLabel>
122
              </CFormFloating>
123
            </DocsExample>
124
          </CCardBody>
125
        </CCard>
126
      </CCol>
127
      <CCol xs={12}>
128
        <CCard className="mb-4">
129
          <CCardHeader>
130
            <strong>React Floating labels</strong> <small>Layout</small>
131
          </CCardHeader>
132
          <CCardBody>
133
            <p className="text-body-secondary small">
134
              When working with the CoreUI for Bootstrap grid system, be sure to place form elements
135
              within column classes.
136
            </p>
137
            <DocsExample href="forms/floating-labels#layout">
138
              <CRow xs={{ gutter: 2 }}>
139
                <CCol md>
140
                  <CFormFloating>
141
                    <CFormInput
142
                      type="email"
143
                      id="floatingInputGrid"
144
                      placeholder="name@example.com"
145
                      defaultValue="email@example.com"
146
                    />
147
                    <CFormLabel htmlFor="floatingInputGrid">Email address</CFormLabel>
148
                  </CFormFloating>
149
                </CCol>
150
                <CCol md>
151
                  <CFormFloating>
152
                    <CFormSelect id="floatingSelectGrid" aria-label="Floating label select example">
153
                      <option>Open this select menu</option>
154
                      <option value="1">One</option>
155
                      <option value="2">Two</option>
156
                      <option value="3">Three</option>
157
                    </CFormSelect>
158
                    <CFormLabel htmlFor="floatingSelectGrid">Works with selects</CFormLabel>
159
                  </CFormFloating>
160
                </CCol>
161
              </CRow>
162
            </DocsExample>
163
          </CCardBody>
164
        </CCard>
165
      </CCol>
166
    </CRow>
167
  )
168
}
169

170
export default FloatingLabels
171