/
gsam
/
ui-kit-ce
Обзор
Документация
Войти
/
gsam
/
ui-kit-ce
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
develop
packages/select/examples/ComplexLayout.tsx
41 строка
1 KB
Denis Svyatovets
v1.10.0
27 мар 2024, 13:48
27 мар 2024, 13:48
c9029ae
Код
Авторство
О чём код?
import * as React from 'react' import { Select } from '@v-uik/base' const OptionLabel = ({ name, date }: { name: string; date: string }) => { return ( <div style={{ display: 'flex' }}> <span style={{ width: '5rem' }}>{name}</span> <span style={{ marginLeft: '1rem', width: '5rem' }}>{date}</span> </div> ) } export const ComplexLayout = (): React.ReactElement => { const [value, setValue] = React.useState('') return ( <div style={{ width: 250 }}> <Select options={[ { value: '', label: 'Choose an option' }, { value: '0', label: <OptionLabel name="Name" date="Date of Birth" />, disabled: true, }, { value: '1', label: <OptionLabel name="Alex" date="21/01/1987" />, }, { value: '2', label: <OptionLabel name="Vladimir" date="12/07/1992" />, }, { value: '3', label: <OptionLabel name="Igor" date="03/05/1985" /> }, ]} value={value} onChange={setValue} /> </div> ) }