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