/
kaws
/
ui-kit-ce
Обзор
Документация
Войти
/
kaws
/
ui-kit-ce
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
develop
packages/select/examples/AbsolutePositioning.tsx
50 строк
1 KB
Строганов Федор Юрьевич
docs: доработана документация Storybook
04 мар 2025, 16:28
04 мар 2025, 16:28
28abce0
Код
Авторство
О чём код?
import * as React from 'react' import { Select, createUseStyles, Text } from '@v-uik/base' const useStyles = createUseStyles((theme) => ({ container: { height: 300, padding: 24, overflow: 'auto', }, content: { height: 500, background: theme.sys.color.backgroundBeta, display: 'flex', alignItems: 'center', justifyContent: 'center', }, })) export const AbsolutePositioningExample = (): React.ReactElement => { const styles = useStyles() const [value, setValue] = React.useState('') return ( <div className={styles.container}> <Select limitByWidth hideDropdownOnOutsideScroll={false} options={[ { value: '', label: 'Выберите опцию' }, { value: '1', label: 'Опция 1' }, { value: '2', label: 'Опция 2' }, { value: '3', label: 'Очень длинная опция 3' }, ]} value={value} label="Заголовок" dropdownProps={{ disablePortal: true, popperOptions: { strategy: 'absolute', }, }} onChange={setValue} /> <div className={styles.content}> <Text>Content below</Text> </div> </div> ) }