ArrowToggle
维护者：
Marginy605
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>
);属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| className | HTML 属性 class | string | |
| direction | 用于设置 arrowToggle 方向 | string | "bottom" |
| size | arrowToggle 大小（像素） | number | 16 |
| qa | HTML 属性 data-qa，用于测试 | string |