ArrowToggle

Maintainer:
Marginy605
GitHub
direction
size

ArrowToggle — это компонент для отображения иконки в виде стрелки, которая может вращаться в четырех направлениях. Подходит для отображения выпадающих списков, компонентов в свёрнутом состоянии и других элементов.

Внешний вид

ArrowToggle поддерживает четыре направления: top (вверх), right (вправо), bottom (вниз) и left (влево).

top right bottom left

<ArrowToggle direction="top" /> top
<ArrowToggle direction="right" /> right
<ArrowToggle direction="bottom" /> bottom
<ArrowToggle direction="left" /> left

Размер

10 20 30 40 50 100

<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>
);

Свойства

ИмяОписаниеТипЗначение по умолчанию
classNameHTML-атрибут class.string
directionЗадает направление arrowToggle.string"bottom"
sizeРазмер arrowToggle (в пикселях).number16
qaHTML-атрибут data-qa, используется для тестирования.string