diff --git a/packages/plasma-new-hope/src/components/Avatar/Avatar.template-doc.mdx b/packages/plasma-new-hope/src/components/Avatar/Avatar.template-doc.mdx new file mode 100644 index 0000000000..874c5286ff --- /dev/null +++ b/packages/plasma-new-hope/src/components/Avatar/Avatar.template-doc.mdx @@ -0,0 +1,97 @@ +--- +id: avatar +title: Avatar +--- + +import { PropsTable, Description } from '@site/src/components'; + +# Avatar + + + + +## Примеры + +### Размер аватара +Размер задается с помощью свойства `size`. Возможные значения свойства: `"xxl"`, `"l"`, `"m"`, `"s"`, `"fit"`. + +```tsx live +import React from 'react'; +import { Avatar } from '@salutejs/{{ package }}'; + +export function App() { + return ( + <> + + + + + + ); +} +``` + +### Инициалы вместо фотографии +Инициалы можно задать с помощью свойства `name`. Желательный формат строки - "Имя Фамилия". Также не должно быть свойства url. + +```tsx live +import React from 'react'; +import { Avatar } from '@salutejs/{{ package }}'; + +export function App() { + return ( + <> + + + ); +} +``` + +### Статус аватара +Статус задается с помощью свойства `status`. Возможные значения: `"active"`, `"inactive"`. + +```tsx live +import React from 'react'; +import { Avatar } from '@salutejs/{{ package }}'; + +export function App() { + return ( + <> + + + + ); +} +``` + +### Увеличение при наведении +Опциональное свойство `"isScalable"`. + +```tsx live +import React from 'react'; +import { Avatar } from '@salutejs/{{ package }}'; + +export function App() { + return ( + <> + + + ); +} +``` + +### Доступность +Добавляем `"role"` и `"tabIndex"`. + +```tsx live +import React from 'react'; +import { Avatar } from '@salutejs/{{ package }}'; + +export function App() { + return ( + <> + + + ); +} +``` diff --git a/packages/plasma-new-hope/src/components/AvatarGroup/AvatarGroup.template-doc.mdx b/packages/plasma-new-hope/src/components/AvatarGroup/AvatarGroup.template-doc.mdx new file mode 100644 index 0000000000..4bb6330ea6 --- /dev/null +++ b/packages/plasma-new-hope/src/components/AvatarGroup/AvatarGroup.template-doc.mdx @@ -0,0 +1,29 @@ +--- +id: avatarGroup +title: AvatarGroup +--- + +import { PropsTable, Description } from '@site/src/components'; + +# AvatarGroup + + + +AvatarGroup это обертка для Avatar. Принимает в себя группу из avatar's. + +```tsx live +import React from 'react'; +import { Avatar, AvatarGroup } from '@salutejs/{{ package }}'; + +export function App() { + return ( + + { + Array(5).fill(true).map(() => ( + + )) + } + + ); +} +``` diff --git a/packages/plasma-new-hope/src/components/Badge/Badge.template-doc.mdx b/packages/plasma-new-hope/src/components/Badge/Badge.template-doc.mdx new file mode 100644 index 0000000000..26917a2a8a --- /dev/null +++ b/packages/plasma-new-hope/src/components/Badge/Badge.template-doc.mdx @@ -0,0 +1,131 @@ +--- +id: badge +title: Badge +--- + +import { PropsTable, Description } from '@site/src/components'; + +# Badge + + + +## Примеры + +### Размер бейджа +Размер задается с помощью свойства `size`. + +Возможные значения свойства: `"l"`, `"m"`, `"s"`. + +```tsx live +import React from 'react'; +import { Badge } from '@salutejs/{{ package }}'; + +export function App() { + return ( +
+ + + +
+ ); +} +``` + +### Скругленность бейджа +Скругленность задается с помощью свойства `pilled`: + +```tsx live +import React from 'react'; +import { Badge } from '@salutejs/{{ package }}'; + +export function App() { + return ( +
+ + + +
+ ); +} +``` + +### Вид бейджа +Вид бейджа задается с помощью свойства `view`. Возможные значения свойства `view`: + ++ `"primary"` – основной бейдж; ++ `"accent"` – бейдж акцентного цвета; ++ `"positive"` – успешное завершение; ++ `"warning"` – предупреждение; ++ `"negative"` – ошибка; ++ `"dark"` – темный бэйдж; ++ `"light"` – светлый бэйдж. + +```tsx live +import React from 'react'; +import { Badge } from '@salutejs/{{ package }}'; + +export function App() { + return ( +
+ + + + + + + +
+ ); +} +``` + +так же на вид бейджа влияет свойство `transparent`: + +```tsx live +import React from 'react'; +import { Badge } from '@salutejs/{{ package }}'; + +export function App() { + return ( +
+ + + + + + + +
+ ); +} +``` + +### Иконка слева / справа +В левой и/или правой части бейджа можно отобразить иконку: + +```tsx live +import React from 'react'; +import { Badge } from '@salutejs/{{ package }}'; +import { IconEye } from '@salutejs/plasma-icons'; + +export function App() { + return ( +
+ + } /> + + } /> +
+ ); +} +``` diff --git a/packages/plasma-new-hope/src/components/Button/Button.template-doc.mdx b/packages/plasma-new-hope/src/components/Button/Button.template-doc.mdx new file mode 100644 index 0000000000..c838ac12d0 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Button/Button.template-doc.mdx @@ -0,0 +1,162 @@ +--- +id: button +title: Button +--- + +import { PropsTable, Description } from '@site/src/components'; + +# Button +Кнопки могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку. + +## Button + + + +## Использование +Компонент `Button` может содержать текст, который указывается в +свойстве `text`, или любой контент напрямую через `children`. + +Свойство text можно использовать вместе со свойствами `contentLeft` и `contentRight`. +С их помощью можно размещать **иконку** слева или справа от текста. + +```tsx live +import React from 'react'; +import { Button } from '@salutejs/{{package}}'; +import { IconDownload } from '@salutejs/plasma-icons'; + +export function App() { + return ( +
+
} /> + + + + ); +} +``` + +## Примеры + +### Размер кнопки +Размер кнопки задается с помощью свойства `size`. Возможные значения свойства: `"l"`, `"m"` или `"s"`: + +```tsx live +import React from 'react'; +import { Button } from '@salutejs/{{package}}'; + +export function App() { + return ( +
+
+ ); +} +``` + +### Вид кнопки +Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`: ++ `"primary"` – основная; ++ `"secondary"` – вторичная; ++ `"success"` – успешное завершение; ++ `"warning"` – предупреждение; ++ `"critical"` – ошибка; ++ `"checked"` – выбранное состояние; ++ `"clear"` – без цветового сопровождения. + +```tsx live +import React from 'react'; +import { Button } from '@salutejs/{{package}}'; + +export function App() { + return ( +
+
+ ); +} +``` + +### Границы кнопки +Границы кнопки задаются с помощью свойства `pin`. Возможные значения свойства `pin`: ++ `square` – обычное скругление; ++ `circle` – сильное скругление; ++ `clear` – нет скругления. + +```tsx live +import React from 'react'; +import { Button } from '@salutejs/{{package}}'; + +export function App() { + return ( +
+ + + + + + + +
+ ); +} +``` + +### Квадратные и круглые кнопки +Для отображения иконок и/или текста в квадратных или круглых кнопках с **равными сторонами**, +используйте компонент `Button` и свойство `contentLeft`, в которое требуется передать нужное значение. + +По умолчанию границы кнопки **квадратные** (со скругленными углами) — `pin="square-square"`. +**Круглые** границы кнопки можно сделать с помощью свойства `pin` со значением `"circle-circle"`. + +```tsx live +import React from 'react'; +import { Button } from '@salutejs/{{package}}'; +import { IconDownload } from '@salutejs/plasma-icons'; + +export function App() { + return ( +
+
+ ); +} +``` + +### Гиперссылка +Компонент поддерживает вывод в виде тега ``, для этого необходимо указать свойство `as`: + +```tsx live +import React from 'react'; +import { Button } from '@salutejs/{{package}}'; +import { IconDownload } from '@salutejs/plasma-icons'; + +export function App() { + return ( + + )} + onClose={() => setIsOpenA(false)} + > +

Header

+ + + Content + + +

Footer

+ + +
+ <>Frame +
+ + setIsOpenB(false)} + placement="right" + asModal={false} + frame={ref} + width="250px" + height="100%" + > + + + + )} + onClose={() => setIsOpenB(false)} + > +

Header

+ + + Content + + +

Footer

+ + + + + + ); +} +``` diff --git a/packages/plasma-new-hope/src/components/Dropdown/Dropdown.template-doc.mdx b/packages/plasma-new-hope/src/components/Dropdown/Dropdown.template-doc.mdx new file mode 100644 index 0000000000..9ea8466591 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Dropdown/Dropdown.template-doc.mdx @@ -0,0 +1,80 @@ +--- +id: dropdown +title: Dropdown +--- + +import { PropsTable, Description } from '@site/src/components'; + +# Dropdown +Набор компонентов для создания выпадающих списков. + + + + +# DropdownItem + + + + +## Использование + +```tsx live +import React, { useState } from 'react'; +import { Dropdown, DropdownItem } from '@salutejs/{{ package }}'; +import { surfaceSolidSecondary } from '@salutejs/{{ theme }}'; + +export function App() { + const [selected, setSelected] = useState(''); + const [isOpen, setIsOpen] = useState(false); + + const handleSelect = (value: string, text: string) => { + setSelected(value); + setIsOpen(false); + }; + + const getDropdownItems = (slug: string, elemCount: number) => + [...Array(elemCount).keys()].map((num) => ({ + value: `${slug}_${num}`, + child: `${slug} ${num}`, + })); + + return ( +
+ Target} + isOpen={isOpen} + onToggle={() => { + setIsOpen(!isOpen); + }} + offset={[10, 15]} + view="primary" + size="m" + placement="right" + trigger="click" + closeOnOverlayClick={false} + closeOnEsc + isFocusTrapped + > + {getDropdownItems('item', 6).map((item) => ( + handleSelect(item.value, item.child)} + value={item.value} + > + {item.child} + + ))} + handleSelect('disabled', 'disabled')} + value="disabled" + disabled + > + disabled + + +
+ ); +} +``` diff --git a/packages/plasma-new-hope/src/components/Grid/Grid.template-doc.mdx b/packages/plasma-new-hope/src/components/Grid/Grid.template-doc.mdx new file mode 100644 index 0000000000..5650ae3432 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Grid/Grid.template-doc.mdx @@ -0,0 +1,142 @@ +--- +id: grid +title: Grid +--- + +import { PropsTable, Description } from '@site/src/components'; + +# Grid +Набор компонентов для создания сетки. + +## Breakpoints +Каждый breakpoints разрешения содержит собственное максимальное количество колонок: + +| Обозначение | Ширина от, px | Ширина до, px | Кол-во колонок | +|-------------|---------------|---------------|----------------| +| largeM | 1200 | - | 30 | +| largeS | 960 | 1199 | 24 | +| mediumM | 786 | 959 | 18 | +| mediumS | 560 | 785 | 12 | +| smallS | 0 | 559 | 6 | + +## Grid + + + +## Row +Блок с отрицательными отступами для размещения колонок (`Col`) по горизонтали. +Блок нельзя вкладывать сам в себя, но можно чередовать далее по дереву с использованием `Col`. +Стилизованный компонент, обладающий всеми свойствами `div`. + +## Col + + + +## Примеры + +### Базовое применение +Размеры колонок указываются свойством `size`, отступ — свойством `offset`. + +```tsx live +import React from 'react'; +import { Grid, Row, Col } from '@salutejs/{{ package }}'; + +export function App() { + const Filler = ({children}) => { + return ( +
+ {children} +
+ ) + }; + + return ( + + + + 3 + + + 2 + + + 3 + + + 4 + + + 6 + + + + + 4 offset 1 + + + 6 offset 2 + + + + ); +} +``` + +### Адаптивные размеры и отступы колонок +Свойства `size` и `offset` могут быть адаптивными. +Для этого добавьте соответствующие свойства с нужными [breakpoints](#Breakpoints). +При этом, `size` и `offset` могут выступать как fallback-значения для остальных разрешений. + +```tsx live +import React from 'react'; +import { Grid, Row, Col } from '@salutejs/{{ package }}'; + +export function App() { + const Filler = ({children}) => { + return ( +
+ {children} +
+ ) + }; + + return ( + + + + 1 + + + 2 + + + + + 4 offset 1 + + + 6 offset 2 + + + + ); +} +``` diff --git a/packages/plasma-new-hope/src/components/Image/Image.template-doc.mdx b/packages/plasma-new-hope/src/components/Image/Image.template-doc.mdx new file mode 100644 index 0000000000..b571cb9d7c --- /dev/null +++ b/packages/plasma-new-hope/src/components/Image/Image.template-doc.mdx @@ -0,0 +1,26 @@ +--- +id: image +title: Image +--- + +import { PropsTable, Description } from '@site/src/components'; + +# Image + + + +```tsx live +import React from 'react'; +import { Image } from '@salutejs/{{ package }}'; + +export function App() { + return ( + Картинка для примера фоном + ); +} +``` diff --git a/packages/plasma-new-hope/src/components/Indicator/Indicator.template-doc.mdx b/packages/plasma-new-hope/src/components/Indicator/Indicator.template-doc.mdx new file mode 100644 index 0000000000..85206b2409 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Indicator/Indicator.template-doc.mdx @@ -0,0 +1,76 @@ +--- +id: indicator +title: Indicator +--- + +import { PropsTable, Description } from '@site/src/components'; + +# Indicator +Индикаторы могут отображаться в нескольких размерах и цветах. + +## Indicator + + + +## Примеры + +### Базовое использование + +```tsx live +import React from 'react'; +import { Indicator } from '@salutejs/{{ package }}'; + +export function App() { + return ( +
+
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+
+ ); +} +``` diff --git a/packages/plasma-new-hope/src/components/Link/Link.template-doc.mdx b/packages/plasma-new-hope/src/components/Link/Link.template-doc.mdx new file mode 100644 index 0000000000..8b232ef2ae --- /dev/null +++ b/packages/plasma-new-hope/src/components/Link/Link.template-doc.mdx @@ -0,0 +1,23 @@ +--- +id: link +title: Link +--- + +import { PropsTable, Description } from '@site/src/components'; + +# Link + + + +```tsx live +import React from 'react'; +import { P1, Link } from '@salutejs/{{ package }}'; + +export function App() { + return ( + + Скачайте приложение. + + ); +} +``` diff --git a/packages/plasma-new-hope/src/components/Modal/Modal.template-doc.mdx b/packages/plasma-new-hope/src/components/Modal/Modal.template-doc.mdx new file mode 100644 index 0000000000..86a7704dcd --- /dev/null +++ b/packages/plasma-new-hope/src/components/Modal/Modal.template-doc.mdx @@ -0,0 +1,56 @@ +--- +id: modal +title: Modal +--- + +import { PropsTable, Description } from '@site/src/components'; + +# Modal + + + +## Использование + +### Провайдер контекста +Поместите `ModalsProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять модальные окна: + +```tsx title="index.ts" +import ReactDOM from 'react-dom'; +import { ModalsProvider } from '@salutejs/{{ package }}'; + +import { App } from './App'; + +ReactDOM.render( + + + , + document.getElementById('root') +); +``` + +### Вызов модального окна +После подключения `ModalsProvider` поместите компонент `Modal` туда, где необходимо применить модальное окно: + +```tsx live +import React from 'react'; +import { Modal, Headline3, P1, Button } from '@salutejs/{{ package }}'; + +export function App() { + const [isOpen, setIsOpen] = React.useState(false); + + const close = React.useCallback(() => { + setIsOpen(false); + }, []); + + return ( +
+
+ ); +} +``` diff --git a/packages/plasma-new-hope/src/components/Notification/Notification.template-doc.mdx b/packages/plasma-new-hope/src/components/Notification/Notification.template-doc.mdx new file mode 100644 index 0000000000..fda8037d8d --- /dev/null +++ b/packages/plasma-new-hope/src/components/Notification/Notification.template-doc.mdx @@ -0,0 +1,59 @@ +--- +id: notification +title: Notification +--- + +import { PropsTable, Description } from '@site/src/components'; + +# Notification + + + +## Использование +Компонент `Notification` может использоваться для создания собственных систем оповещения. +Вид компонента контролируется свойствами (props). +Текстовая часть оповещения состоит из `title` и `children`. +Слева или сверху от нее, также можно пробросить иконку через свойство `icon`. +Также есть часть `actions`, в которой предполагается отображение кнопок для взаимодействия. + +### Провайдер контекста +Поместите `NotificationsProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять модальные окна: + +```tsx title="index.ts" +import ReactDOM from 'react-dom'; +import { NotificationsProvider } from '@salutejs/{{ package }}'; + +import { App } from './App'; + +ReactDOM.render( + + + , + document.getElementById('root') +); +``` + +### Вызов уведомления +После подключения `NotificationsProvider` станет возможен вызов функции `addNotification`, +который приведет к отображению оповещения. +Функция принимает значения свойств компонента `Notification`: + +```tsx live +import React from 'react'; +import { Button, addNotification, NotificationsProvider } from '@salutejs/{{ package }}'; + +export function App() { + const handleClick = React.useCallback(() => { + addNotification({ + title: 'Входящий вызов', + children: 'Принять?', + }, 1000); + }, []); + + return ( + + } + offset={[0, 6]} + arrow={} + placement='bottom' + trigger='click' + closeOnOverlayClick + closeOnEsc + isFocusTrapped + > + + <>Content + + + + + ); +} +``` diff --git a/packages/plasma-new-hope/src/components/Popup/Popup.template-doc.mdx b/packages/plasma-new-hope/src/components/Popup/Popup.template-doc.mdx new file mode 100644 index 0000000000..fc1775207a --- /dev/null +++ b/packages/plasma-new-hope/src/components/Popup/Popup.template-doc.mdx @@ -0,0 +1,209 @@ +--- +id: popupBase +title: PopupBase +--- + +import { PropsTable, Description } from '@site/src/components'; + +# PopupBase + + + +### Провайдер контекста + +Поместите `PopupBaseProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять PopupBase: + +```tsx title="index.ts" +import ReactDOM from 'react-dom'; +import { PopupBaseProvider } from '@salutejs/{{ package }}'; + +import { App } from './App'; + +ReactDOM.render( + + + , + document.getElementById('root') +); +``` + +### Использование + +PopupBase можно использовать как и на всем окне, так и в отдельном фрейме - свойство `frame`. +Также это свойство поддерживает передачу id элемента, в котором будет использоваться компонент. +Само позиционирование можно указать с помощью свойства `placement`(center - по умолчанию; left, right, top, bottom и их комбинации), + а также определить отступы от точки с помощью `offset`. + +```tsx live +import React, { useRef } from 'react'; +import { surfaceSolid03, surfaceSolid02 } from '@salutejs/plasma-tokens/brands/{{ theme }}'; +import { SSRProvider, Button, PopupBase, PopupBaseProvider } from '@salutejs/{{ package }}'; + +export function App() { + const [isOpenA, setIsOpenA] = React.useState(false); + const [isOpenB, setIsOpenB] = React.useState(false); + + const ref = useRef(); + + return ( + + +
+
+
+ +
+ + <>Content +
+ +
+ <>Frame +
+ + + + <>Content + + +
+ + + ); +} +``` + +## Подключение анимации + +Для подключения анимации нужно добавить параметр `withAnimation`. +Само управление происходит с помощью классов через переменные `endAnimation`, `endTransition` из объекта `popupBaseClasses` для `PopupBase`. +Для добавления анимации необходимо использовать класс `.popup-base-root` через переменную `popupBaseClasses.root` из пакета. + +Пример: + +```tsx +const StyledPopupTransition = styled(PopupBase)` + && > .${popupBaseClasses.root} { + opacity: 1; + transition: opacity 0.5s 0.1s; + } + + &&.${popupBaseClasses.endTransition} > .${popupBaseClasses.root} { + opacity: 0; + transition: opacity 0.5s 0.1s; + } +`; +``` + +или + +```tsx +const StyledPopupAnimation = styled(PopupBase)` + && > .${popupBaseClasses.root} { + animation: fadeIn 1s forwards; + } + + &&.${popupBaseClasses.endAnimation} > .${popupBaseClasses.root} { + animation: fadeOut 1s forwards; + } + + @keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } + } + + @keyframes fadeOut { + from { + opacity: 1; + } + + to { + opacity: 0; + } + } +`; +``` + +И в самом компоненте: + +```tsx + const [isOpen, setIsOpen] = React.useState(false); + + return ( + <> +
+
+ +
+ +
+ + + ); +} +``` diff --git a/packages/plasma-new-hope/src/components/Radiobox/Radiobox.template-doc.mdx b/packages/plasma-new-hope/src/components/Radiobox/Radiobox.template-doc.mdx new file mode 100644 index 0000000000..76e978ece5 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Radiobox/Radiobox.template-doc.mdx @@ -0,0 +1,38 @@ +--- +id: radiobox +title: Radiobox +--- + +import { PropsTable, Description } from '@site/src/components'; + +# Radiobox + + + +## Использование +Компонент `Radiobox` может содержать лейбл и описание. + +По умолчанию, контент внутри лейбла и описания многострочный. + +Для того чтобы стал однострочным, необходимо использовать свойство `singleLine`(по умолчанию `false`). + +```tsx live +import React from 'react'; +import { Radiobox } from '@salutejs/{{ package }}'; + +export function App() { + return ( + + ); +} +``` + +## Группа радиокнопок +Компоненты `Radiobox` следует объединять в `RadioGroup` +```tsx live + +

Заголовок

+ + + +``` diff --git a/packages/plasma-new-hope/src/components/Segment/Segment.template-doc.mdx b/packages/plasma-new-hope/src/components/Segment/Segment.template-doc.mdx new file mode 100644 index 0000000000..74fe041d65 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Segment/Segment.template-doc.mdx @@ -0,0 +1,61 @@ +--- +id: segment +title: Segment +--- + +import { PropsTable, Description } from '@site/src/components'; + +# Segment +Набор компонентов для создания группы сегментов. +Структура для сегментов похожа на структуру маркированных списков. + +## SegmentGroup + + + + +## SegmentItem + + + + +### Провайдер контекста + +Оберните в `SegmentProvider` компонент, в котором будут использованы SegmentGroup с SegmentItem. +Внутри данного провайдера есть доступ к хуку `useSegment`. + +```tsx live +import React, { useState } from 'react'; +import { SegmentGroup, SegmentItem, SegmentProvider } from '@salutejs/{{ package }}'; + +export function App() { + const items = Array(8).fill(0); + + const SegmentTemplate = () => { + const {selectedSegmentItems} = useSegment(); + + return ( + <> +
Выбранные элементы: {selectedSegmentItems.join(', ')}
+ + {items.map((_, i) => ( + + ))} + + + ) + } + + return ( + + + + ); +} +``` diff --git a/packages/plasma-new-hope/src/components/Select/Select.template-doc.mdx b/packages/plasma-new-hope/src/components/Select/Select.template-doc.mdx new file mode 100644 index 0000000000..06ff1ed172 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Select/Select.template-doc.mdx @@ -0,0 +1,115 @@ +--- +id: select +title: Select +--- + +import { PropsTable, Description } from '@site/src/components'; + +# Select + + + +```tsx live +import React, { useState } from 'react'; +import { Select } from '@salutejs/{{ package }}'; + +export function App() { + const items = [ + { value: 'each', label: 'Каждый' }, + { value: 'hunter', label: 'Охотник', isDisabled: true }, + { value: 'wants', label: 'Желает' }, + { + value: 'toKnow', + label: 'Знать', + items: [ + { value: '_fullText', label: 'Каждый охотник желает знать, где сидит фазан' }, + { value: '_thePheasant', label: 'Фазан' }, + { value: '_is', label: 'Сидит' }, + ], + }, + { value: 'where', label: 'Где' }, + { value: 'is', label: 'Сидит' }, + { value: 'thePheasant', label: 'Фазан' }, + { value: 'fullText', label: 'Каждый охотник желает знать, где сидит фазан' }, + ]; + + const [value, setValue] = useState(null); + + return ( +
+
+ +
+
+ ); +} +``` + +### Управление высотой выпадающего меню +Что бы задать высоту и `scroll` для выпадающего меню можно использовать **props** для компонента `Select`: +- **listOverflow** +- **listHeight** + +> Эти **props** необязательные, если их не указать будет использовано значение - [initial](https://developer.mozilla.org/en-US/docs/Web/CSS/initial) + +```tsx live +import React, { useState, useCallback } from 'react'; +import { Select, Modal, ModalsProvider, H3, Button } from '@salutejs/{{ package }}'; + +export function App() { + const [value, setValue] = useState(null); + const [isOpenA, setIsOpenA] = useState(false); + + const onCloseA = useCallback(() => setIsOpenA(false), []); + + const items = [ + { value: 'each', label: 'Каждый' }, + { value: 'hunter', label: 'Охотник', isDisabled: true }, + { value: 'wants', label: 'Желает' }, + { + value: 'toKnow', + label: 'Знать', + items: [ + { value: '_fullText', label: 'Каждый охотник желает знать, где сидит фазан' }, + { value: '_thePheasant', label: 'Фазан' }, + { value: '_is', label: 'Сидит' }, + ], + }, + { value: 'where', label: 'Где' }, + { value: 'is', label: 'Сидит' }, + { value: 'thePheasant', label: 'Фазан' }, + { value: 'fullText', label: 'Каждый охотник желает знать, где сидит фазан' }, + ]; + + return ( +
+ +