Radix Vue

外観

スイッチ ​

ユーザーがオンとオフを切り替えることができるコントロールです。
vue
<script setup lang="ts">
import { SwitchRoot, SwitchThumb } from 'radix-vue'
import { ref } from 'vue'

const switchState = ref(false)
</script>

<template>
  <div class="flex gap-2 items-center">
    <label
      class="text-white text-[15px] leading-none pr-[15px] select-none"
      for="airplane-mode"
    >
      Airplane mode
    </label>
    <SwitchRoot
      id="airplane-mode"
      v-model:checked="switchState"
      class="w-[42px] h-[25px] focus-within:outline focus-within:outline-black flex bg-black/50 shadow-sm rounded-full relative data-[state=checked]:bg-black cursor-default"
    >
      <SwitchThumb
        class="block w-[21px] h-[21px] my-auto bg-white shadow-sm rounded-full transition-transform duration-100 translate-x-0.5 will-change-transform data-[state=checked]:translate-x-[19px]"
      />
    </SwitchRoot>
  </div>
</template>

機能 ​

  • 完全なキーボードナビゲーション。
  • 制御された状態でも、制御されない状態でも使用できます。

インストール ​

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

sh
$ npm add radix-vue

構造 ​

すべての部品をインポートして組み立てます。

vue
<script setup>
import { SwitchRoot, SwitchThumb } from 'radix-vue'
</script>

<template>
  <SwitchRoot>
    <SwitchThumb />
  </SwitchRoot>
</template>

APIリファレンス ​

ルート ​

スイッチのすべての部分が含まれています。form内で使用すると、イベントが正しく伝播するようにinputもレンダリングされます。

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

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

asChild
boolean

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

詳細については、コンポジションガイドをお読みください。

checked
boolean

スイッチの制御された状態。v-model:checkedとしてバインドできます。

defaultChecked
boolean

スイッチが最初にレンダリングされたときの状態。状態を制御する必要がない場合に使用します。

disabled
boolean

trueの場合、ユーザーがスイッチを操作することを防ぎます。

id
string
name
string

スイッチの名前。名前/値ペアの一部として、所有するフォームとともに送信されます。

required
boolean

trueの場合、所有するフォームを送信する前に、ユーザーがスイッチをチェックする必要があることを示します。

value
'on'
string

nameとともに送信されたときにデータとして与えられる値。

Emitペイロード
update:checked
[payload: boolean]

スイッチのチェック状態が変化したときに呼び出されるイベントハンドラー。

スロット（デフォルト）ペイロード
checked
boolean

現在のチェック状態

データ属性値
[data-state]"checked" | "unchecked"
[data-disabled]無効の場合に存在します

サム ​

スイッチがオンかオフかを視覚的に示すために使用されるサム。

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

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

asChild
boolean

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

詳細については、コンポジションガイドをお読みください。

データ属性値
[data-state]"checked" | "unchecked"
[data-disabled]無効の場合に存在します

アクセシビリティ ​

switchロール要件に準拠しています。

キーボード操作 ​

キー説明
スペース
コンポーネントの状態を切り替えます。
Enter
コンポーネントの状態を切り替えます。