Radix Vue

外観

トグル ​

オンまたはオフのいずれかの状態になる2状態ボタン。
vue
<script setup lang="ts">
import { Toggle } from 'radix-vue'
import { Icon } from '@iconify/vue'
import { ref } from 'vue'

const toggleState = ref(false)
</script>

<template>
  <Toggle
    v-model:pressed="toggleState"
    aria-label="Toggle italic"
    class="hover:bg-green3 text-mauve11 data-[state=on]:bg-green6 data-[state=on]:text-violet12 shadow-blackA7 flex h-[35px] w-[35px] items-center justify-center rounded bg-white text-base leading-4 shadow-[0_2px_10px] focus-within:shadow-[0_0_0_2px] focus-within:shadow-black"
  >
    <Icon
      icon="radix-icons:font-italic"
      class="w-[15px] h-[15px]"
    />
  </Toggle>
</template>

機能 ​

  • フルキーボードナビゲーション。
  • 制御または非制御にすることができます。

インストール ​

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

sh
$ npm add radix-vue

構成 ​

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

vue
<script setup>
import { Toggle } from 'radix-vue'
</script>

<template>
  <Toggle />
</template>

APIリファレンス ​

ルート ​

トグル。

プロップデフォルトタイプ
as
'button'
AsTag | コンポーネント

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

asChild
boolean

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

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

defaultValue
boolean

最初にレンダリングされたときのトグルの押された状態。開いている状態を制御する必要がない場合に使用します。

disabled
false
boolean

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

pressed
boolean

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

Emitペイロード
update:pressed
[value: boolean]

トグルの押された状態が変更されたときに呼び出されるイベントハンドラー。

スロット (デフォルト)ペイロード
pressed
boolean

現在の押された状態

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

アクセシビリティ ​

キーボード操作 ​

キー説明
スペース
トグルを有効/無効にします。
Enter
トグルを有効/無効にします。