UIKit
7.11.0
• ArrowToggleКомпоненты
UIKit
7.11.0
Date Components
3.1.0
Navigation
3.3.6
ArrowToggle
Maintainer:
Marginy605
direction
size
ArrowToggle
— это компонент для отображения иконки в виде стрелки, которая может вращаться в четырех направлениях. Подходит для отображения выпадающих списков, компонентов в свёрнутом состоянии и других элементов.
§Внешний вид
ArrowToggle
поддерживает четыре направления: top
(вверх), right
(вправо), bottom
(вниз) и left
(влево).
<ArrowToggle direction="top" /> top
<ArrowToggle direction="right" /> right
<ArrowToggle direction="bottom" /> bottom
<ArrowToggle direction="left" /> left
§Размер
<ArrowToggle size={10} /> 10
<ArrowToggle size={20} /> 20
<ArrowToggle size={30} /> 30
<ArrowToggle size={40} /> 40
<ArrowToggle size={50} /> 50
<ArrowToggle size={100} /> 100
§Использование в качестве интерактивного элемента
Пример использования ArrowToggle
с иконкой-переключателем:
const [directionIndex, setDirectionIndex] = React.useState(0);
const directions = ['top', 'left', 'bottom', 'right'] as Array<ArrowToggleProps['direction']>;
const direction = directions[directionIndex % directions.length];
return (
<Button onClick={() => setDirectionIndex(directionIndex + 1)} view="flat">
<ArrowToggle {...args} direction={direction} /> <h3>{direction}</h3>
</Button>
);
§Свойства
Имя | Описание | Тип | Значение по умолчанию |
---|---|---|---|
className | HTML-атрибут class . | string | |
direction | Задает направление arrowToggle . | string | "bottom" |
size | Размер arrowToggle (в пикселях). | number | 16 |
qa | HTML-атрибут data-qa , используется для тестирования. | string |