SelectionControl
Компонент, который представляет собой базовую обертку для переключателей (checkbox, radio, switch).
Лежит в основе таких компонентов как Radio, Checkbox и Switch.
Применение компонента
С помощью данного компонента можно более гибко контролировать поведение и стилизацию всех типов переключателей. Может быть полезно, если вы хотите задать специфичную цветовую тему компонентов или изменить порядок текстовых элементов.
Структура
Компонент SelectionControl служит обёрткой для всего контента.
Подкомпонент SelectionControl.Label вкладывается в SelectionControl и используется для задания заголовка и подзаголовка переключателя.
Также в SelectionControl необходимо вложить нужный переключатель, для этого используйте соответствующие компоненты Checkbox.Input,
Radio.Input или Switch.
Переключатели и подкомпонент SelectionControl.Label можно располагать в любом порядке.
Свойства и методы
SelectionControl
| Свойство | Описание |
|---|---|
activeMode | StateModeLiteralСтиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active. По умолчанию: - |
Component | ElementType<any, keyof IntrinsicElements>По умолчанию: - |
focusVisibleMode | FocusVisibleModeСтиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс при :focus-visible По умолчанию: - |
getRootRef | Ref<HTMLLabelElement>По умолчанию: - |
hasActive | booleanУказывает, должен ли компонент реагировать на По умолчанию: - |
hasHover | booleanУказывает, должен ли компонент реагировать на По умолчанию: - |
hoverMode | StateModeLiteralСтиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover. По умолчанию: - |
noPadding | booleanОтключает отступы. При использовании этого свойства, значение по умолчанию для свойств По умолчанию: false |
SelectionControl.Label
| Свойство | Описание |
|---|---|
description | ReactNodeПо умолчанию: - |
titleAfter | ReactNodeПо умолчанию: - |