/
kaws
/
ui-kit-ce
Обзор
Документация
Войти
/
kaws
/
ui-kit-ce
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
develop
packages/bar/examples/BarSelectExample.tsx
69 строк
1 KB
Строганов Федор Юрьевич
docs: доработана документация Storybook
04 мар 2025, 16:28
04 мар 2025, 16:28
28abce0
Код
Авторство
О чём код?
import * as React from 'react' import { Bar, BarButton, BarSelect } from '@v-uik/base' const options = [ { value: '', label: 'Select' }, { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }, ] interface IconProps extends React.SVGAttributes<SVGElement> {} const svgPath = 'M22.5 4.5H1.5V6H22.5V4.5ZM22.5 9H1.5V10.5H22.5V9ZM1.5 13.5H22.5V15H1.5V13.5ZM22.5 18H1.5V19.5H22.5V18Z' // eslint-disable-line max-len export const IconBurger: React.FC<IconProps> = ({ width = 24, height = 24, fill = 'currentColor', ...props }) => { return ( <svg width={width} height={height} fill={fill} {...props} viewBox="0 0 24 24" > <path d={svgPath} fillRule="evenodd" /> </svg> ) } IconBurger.displayName = 'IconBurger' export const BarSelectExample = (): JSX.Element => { const [selectValue, setSelectValue] = React.useState('') const handleChangeSelectValue = (value: string) => { setSelectValue(value) } return ( <div style={{ height: 24, }} > <div style={{ position: 'absolute', inset: '10px 6px', }} > <Bar style={{ position: 'absolute' }}> <BarButton icon={<IconBurger />} /> <BarSelect style={{ marginLeft: 'auto' }} options={options} value={selectValue} onChange={handleChangeSelectValue} /> </Bar> </div> </div> ) }