File size: 3,967 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 | import React from 'react'
import { CCard, CCardBody, CCardHeader, CCol, CFormSelect, CRow } from '@coreui/react'
import { DocsComponents, DocsExample } from 'src/components'
const Select = () => {
return (
<CRow>
<CCol xs={12}>
<DocsComponents href="forms/select/" />
<CCard className="mb-4">
<CCardHeader>
<strong>React Select</strong> <small>Default</small>
</CCardHeader>
<CCardBody>
<DocsExample href="forms/select">
<CFormSelect aria-label="Default select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Select</strong> <small>Sizing</small>
</CCardHeader>
<CCardBody>
<p className="text-body-secondary small">
You may also choose from small and large custom selects to match our similarly sized
text inputs.
</p>
<DocsExample href="forms/select#sizing">
<CFormSelect size="lg" className="mb-3" aria-label="Large select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CFormSelect size="sm" className="mb-3" aria-label="Small select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</DocsExample>
<p className="text-body-secondary small">
The <code>multiple</code> attribute is also supported:
</p>
<DocsExample href="forms/select#sizing">
<CFormSelect size="lg" multiple aria-label="Multiple select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</DocsExample>
<p className="text-body-secondary small">
As is the <code>htmlSize</code> property:
</p>
<DocsExample href="forms/select#sizing">
<CFormSelect size="lg" multiple aria-label="Multiple select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Select</strong> <small>Disabled</small>
</CCardHeader>
<CCardBody>
<p className="text-body-secondary small">
Add the <code>disabled</code> boolean attribute on a select to give it a grayed out
appearance and remove pointer events.
</p>
<DocsExample href="forms/select#disabled">
<CFormSelect aria-label="Disabled select example" disabled>
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
</CRow>
)
}
export default Select
|