Radix Vue

外観

トグルグループ ​

オンとオフを切り替えることができる、2状態ボタンのセットです。

vue
<script setup lang="ts">
import { ToggleGroupItem, ToggleGroupRoot } from 'radix-vue'
import { Icon } from '@iconify/vue'
import { ref } from 'vue'

const toggleStateSingle = ref('left')
const toggleStateMultiple = ref(['italic'])

const toggleGroupItemClasses
  = 'hover:bg-green3 text-mauve11 data-[state=on]:bg-green6 data-[state=on]:text-violet12 flex h-[35px] w-[35px] items-center justify-center bg-white text-base leading-4 first:rounded-l last:rounded-r focus:z-10 focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none'
</script>

<template>
  <div>
    <ToggleGroupRoot
      v-model="toggleStateSingle"
      type="single"
      class="flex"
    >
      <ToggleGroupItem
        value="left"
        aria-label="Toggle italic"
        :class="toggleGroupItemClasses"
      >
        <Icon
          icon="radix-icons:text-align-left"
          class="w-[15px] h-[15px]"
        />
      </ToggleGroupItem>
      <ToggleGroupItem
        value="center"
        aria-label="Toggle italic"
        :class="toggleGroupItemClasses"
      >
        <Icon
          icon="radix-icons:text-align-center"
          class="w-[15px] h-[15px]"
        />
      </ToggleGroupItem>
      <ToggleGroupItem
        value="right"
        aria-label="Toggle italic"
        :class="toggleGroupItemClasses"
      >
        <Icon
          icon="radix-icons:text-align-right"
          class="w-[15px] h-[15px]"
        />
      </ToggleGroupItem>
    </ToggleGroupRoot>
    <br>
    <ToggleGroupRoot
      v-model="toggleStateMultiple"
      type="multiple"
      class="flex"
    >
      <ToggleGroupItem
        value="bold"
        aria-label="Toggle italic"
        :class="toggleGroupItemClasses"
      >
        <Icon
          icon="radix-icons:font-bold"
          class="w-[15px] h-[15px]"
        />
      </ToggleGroupItem>
      <ToggleGroupItem
        value="italic"
        aria-label="Toggle italic"
        :class="toggleGroupItemClasses"
      >
        <Icon
          icon="radix-icons:font-italic"
          class="w-[15px] h-[15px]"
        />
      </ToggleGroupItem>
      <ToggleGroupItem
        value="strikethrough"
        aria-label="Toggle italic"
        :class="toggleGroupItemClasses"
      >
        <Icon
          icon="radix-icons:strikethrough"
          class="w-[15px] h-[15px]"
        />
      </ToggleGroupItem>
    </ToggleGroupRoot>
  </div>
</template>

機能 ​

  • 完全なキーボードナビゲーション。
  • 水平/垂直方向に対応。
  • シングルとマルチプルの押下ボタンをサポート。
  • 制御可能または非制御可能。

インストール ​

コマンドラインからコンポーネントをインストールします。

sh
$ npm add radix-vue

構成 ​

コンポーネントをインポートします。

vue
<script setup>
import { ToggleGroupItem, ToggleGroupRoot } from 'radix-vue'
</script>

<template>
  <ToggleGroupRoot>
    <ToggleGroupItem />
  </ToggleGroupRoot>
</template>

APIリファレンス ​

ルート ​

トグルグループのすべての部分を含みます。

プロパティデフォルト値型
as
'div'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡された要素に対してデフォルトのレンダリング要素を変更し、それらのプロパティと動作をマージします。

詳細は、コンポジションガイドをご覧ください。

defaultValue
string | string[]

項目のデフォルトのアクティブ値。

項目の状態を制御する必要がない場合に使用します。

dir
'ltr' | 'rtl'

該当する場合のコンボボックスの読み取り方向。
省略された場合、グローバルにConfigProviderから継承するか、LTR（左から右）の読み取りモードを想定します。

disabled
false
boolean

trueの場合、ユーザーがトグルグループとそのすべての項目と対話することを防ぎます。

loop
true
boolean

loopとrovingFocusがtrueの場合、キーボードナビゲーションは最後の項目から最初の項目へ、そしてその逆にループします。

modelValue
string | string[]

アクティブな項目の制御された値。

項目の状態を制御する必要がある場合に使用します。v-modelでバインドできます。

orientation
'vertical' | 'horizontal'

コンポーネントの方向。フォーカスの移動方法を決定します。horizontalは左右の矢印、verticalは上下の矢印。

rovingFocus
true
boolean

falseの場合、矢印キーを使用して項目を移動することはできません。

type
'single' | 'multiple'

一度に押すことができる項目が「シングル」か「マルチプル」かを決定します。

v-modelまたはdefaultValueのいずれかが定義されている場合、このプロパティは無視されます。型は値から推論されます。

イベントペイロード
update:modelValue
[payload: string | string[]]

値が変更されたときに呼び出されるイベントハンドラー。

スロット (デフォルト)ペイロード
modelValue
string | string[] | undefined

現在のトグル値

データ属性値
[data-orientation]"vertical" | "horizontal"

項目 ​

グループ内の項目。

プロパティデフォルト値型
as
'button'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡された要素に対してデフォルトのレンダリング要素を変更し、それらのプロパティと動作をマージします。

詳細は、コンポジションガイドをご覧ください。

defaultValue
boolean

初期レンダリング時のトグルの押下状態。開いている状態を制御する必要がない場合に使用します。

disabled
boolean

trueの場合、ユーザーがトグルと対話することを防ぎます。

pressed
boolean

トグルの制御された押下状態。v-modelとしてバインドできます。

value*
string

トグルグループ項目の文字列値。トグルグループ内のすべての項目には一意の値を使用する必要があります。

データ属性値
[data-state]"on" | "off"
[data-disabled]無効になっている場合に表示されます。
[data-orientation]"vertical" | "horizontal"

例 ​

常に値が存在することを確認する ​

コンポーネントを制御して、値が存在することを確認できます。

vue
<script setup>
import { ref } from 'vue'
import { ToggleGroupItem, ToggleGroupRoot } from 'radix-vue'

const value = ref('left')
</script>

<template>
  <ToggleGroupRoot
    :model-value="value"
    @update:model-value="(val) => {
      if (val) value = val
    }"
  >
    <ToggleGroupItem value="left">
      <TextAlignLeftIcon />
    </ToggleGroupItem>
    <ToggleGroupItem value="center">
      <TextAlignCenterIcon />
    </ToggleGroupItem>
    <ToggleGroupItem value="right">
      <TextAlignRightIcon />
    </ToggleGroupItem>
  </ToggleGroupRoot>
</template>

アクセシビリティ ​

ロービングtabIndexを使用して、項目間のフォーカスの移動を管理します。

キーボード操作 ​

キー説明
Tab
フォーカスを押下されている項目またはグループの最初の項目に移動します。
Space
項目をアクティブ化/非アクティブ化します。
Enter
項目をアクティブ化/非アクティブ化します。
ArrowDown
グループ内の次の項目にフォーカスを移動します。
ArrowRight
グループ内の次の項目にフォーカスを移動します。
ArrowUp
グループ内の前の項目にフォーカスを移動します。
ArrowLeft
グループ内の前の項目にフォーカスを移動します。
Home
最初の項目にフォーカスを移動します。
End
最後の項目にフォーカスを移動します。