@yandex/ui
Version:
Yandex UI components
131 lines (98 loc) • 13.1 kB
Markdown
# Tumbler
<a href='https://github.yandex-team.ru/search-interfaces/frontend/tree/master/packages/lego-components/src/Tumbler' target='_blank'><img src='https://badger.yandex-team.ru/custom/[Исходники]/[Github
][green]/badge.svg' /></a> <a href='https://search.yandex-team.ru/stsearch?text=Tumbler.ts&facet.queue=ISL&facet.type=bug&facet.status=128' target='_blank'><img src='https://badger.yandex-team.ru/custom/[Известные проблемы]/[Startrek][blue]/badge.svg' /></a>
<!-- description:start -->
Компонент, предназначенный для создания переключателя.
<!-- description:end -->
## Пример использования
Конфигурация темы на уровне проекта:
```ts
// src/lib/theme.ts
import { configureRootTheme } from '@yandex-lego/components/Theme'
import { theme } from '@yandex-lego/components/Theme/presets/default'
configureRootTheme({ theme })
```
Использование с нужным набором модификаторов:
```ts
// src/App.ts
import React, { useState } from 'react'
import { compose } from '@bem-react/core'
import {
Tumbler as TumblerDesktop,
withSizeM,
withViewDefault,
} from '@yandex-lego/components/Tumbler/desktop'
const Tumbler = compose(withSizeM, withViewDefault)(TumblerDesktop)
const App = () => {
const [checked, setChecked] = useState(false)
return (
<Tumbler
view="default"
size="m"
checked={checked}
onChange={() => setChecked(!checked)}
/>
)
}
```
Использование с полным набором модификаторов:
```ts
// src/App.ts
import React, { useState } from 'react'
import { Tumbler } from '@yandex-lego/components/Tumbler/desktop/bundle'
const App = () => {
const [checked, setChecked] = useState(false)
return (
<Tumbler
view="default"
size="m"
checked={checked}
onChange={() => setChecked(!checked)}
/>
)
}
```
## Примеры
### Размер переключателя
Чтобы изменить размер переключателя, установите свойство `size` в одно из следующих значений: `"s"`, `"m"`, `"l"`.
{{%story::desktop:controls-tumbler-desktop--size%}}
### Подпись переключателя
Чтобы добавить подпись для переключателя, установите свойство `labelAfter` либо `labelBefore` с нужным текстом или `jsx`-разметкой (например, иконка).
> ⚠️ Если установлены обе подписи, то изменение состояния будет происходить только при нажатии на противоположную:
> `unchecked -> labelAfter`, `checked <- labelBefore`.
>
> ⚠️ Чтобы обеспечить доступность с использованием SVG-иконки в качестве подписи, необходимо добавить семантическое описание этой иконки в `aria-label`.
{{%story::desktop:controls-tumbler-desktop--label%}}
## Свойства
<!-- props:start -->
| Свойство | Тип | Описание |
| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| checked | `false \| true` | Состояние переключателя |
| className? | `string` | Дополнительный класс у корневого DOM-элемента |
| controlRef? | `RefObject<HTMLInputElement>` | Ссылка на нативный DOM-элемент нативного инпута |
| disabled? | `false \| true` | Неактивное состояние переключателя |
| id? | `string` | Уникальный id компонента |
| innerRef? | `RefObject<HTMLSpanElement>` | Ссылка на корневой DOM-элемент компонента |
| labelAfter? | `string \| number \| false \| true \| {} \| ReactElement<any, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)>) \| (new (props: any) => Component<any, any, any>)> \| ReactNodeArray \| ReactPortal` | Подпись после переключателя |
| labelBefore? | `string \| number \| false \| true \| {} \| ReactElement<any, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)>) \| (new (props: any) => Component<any, any, any>)> \| ReactNodeArray \| ReactPortal` | Подпись перед переключателем |
| name? | `string` | Имя переключателя в форме |
| onBlur? | `(event: FocusEvent<HTMLButtonElement>) => void` | Обработчик, который вызывается при потере фокуса переключателем |
| onChange | `(event: ChangeEvent<HTMLInputElement>) => void` | Обработчик, который вызывается при изменении состояния |
| onClick? | `(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void` | Обработчик, который вызывается при нажатии на переключатель |
| onFocus? | `(event: FocusEvent<HTMLButtonElement>) => void` | Обработчик, который вызывается при получении фокуса переключателем |
| onKeyDown? | `(event: KeyboardEvent<HTMLButtonElement>) => void` | Обработчик, который вызывается при нажатии клавиши на клавиатуре (при этом переключатель должен быть в фокусе) |
| onKeyUp? | `(event: KeyboardEvent<HTMLButtonElement>) => void` | Обработчик, который вызывается при отжатии клавиши на клавиатуре (при этом переключатель должен быть в фокусе) |
| tabIndex? | `number` | Целое число, определяющее, должен ли переключатель участвовать в последовательной навигации по всей странице с помощью клавиатуры |
| title? | `string` | Всплывающая подсказка |
| autoFocus? | `false \| true` | Устанавливает фокус в компонент при монтировании |
| required? | `false \| true` | Устанавливает в компоненте обязательное состояние |
<!-- props:end -->
## Модификаторы
<!-- modifiers:start -->
### size
Модификатор, отвечающий за размер переключателя.
**Допустимые значения:** `"l"`, `"m"`, `"s"`.
### view
Модификатор, отвечающий за внешний вид переключателя.
**Допустимые значения:** `"default"`.
<!-- modifiers:end -->