Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

SegmentedControl

SegmentedControlは、ユーザーが複数の選択肢の中から1つを選択するための使用されるコンポーネントです。

ソース@yamada-ui/segmented-control

SegmentedControlButtonにアイコンのみを使用する場合は、SegmentedControlButtonにaria-labelを設定します。

<Wrap gap="md">
  <SegmentedControl>
    <SegmentedControlButton aria-label="plus" value="plus">
      <PlusIcon />
    </SegmentedControlButton>
    <SegmentedControlButton aria-label="minus" value="minus">
      <MinusIcon />
    </SegmentedControlButton>
  </SegmentedControl>
</Wrap>
Copied!

キーボード操作

キー説明状態
Tab選択されている項目をフォーカスします。-
ArrowLeft無効ではない前の項目をフォーカスします。最初の項目の場合は無効ではない最後の項目をフォーカスします。-
ArrowRight無効ではない次の項目をフォーカスします。最後の項目の場合は無効ではない最初の項目をフォーカスします。-

ARIAロールと属性

コンポーネントロールと属性使い方
SegmentedControlrole="radiogroup"ラジオグループであることを示します。
SegmentedControlButtonrole="radio"radioであることを示します。
aria-disabled="true"isDisabledが"true"に設定されている場合、"true"を設定します。

GitHubでこのページを編集する

前Rating次データディスプレイ