Radix Vue

外観

ツールバー ​

ボタン、ツールバーグループ、ドロップダウンメニューなどのコントロールのセットをグループ化するためのコンテナです。
vue
<script setup lang="ts">
import {
  ToolbarButton,
  ToolbarLink,
  ToolbarRoot,
  ToolbarSeparator,
  ToolbarToggleGroup,
  ToolbarToggleItem,
} from 'radix-vue'
import { Icon } from '@iconify/vue'
import { ref } from 'vue'

const toggleStateSingle = ref('center')
const toggleStateMultiple = ref([])
</script>

<template>
  <ToolbarRoot
    class="flex p-[10px] w-full max-w-[610px] !min-w-max rounded-md bg-white shadow-[0_2px_10px] shadow-blackA7"
    aria-label="Formatting options"
  >
    <ToolbarToggleGroup
      v-model="toggleStateMultiple"
      type="multiple"
      aria-label="Text formatting"
    >
      <ToolbarToggleItem
        class="flex-shrink-0 flex-grow-0 basis-auto text-mauve11 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-green3 hover:text-grass11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7 first:ml-0 data-[state=on]:bg-green5 data-[state=on]:text-grass11"
        value="bold"
        aria-label="Bold"
      >
        <Icon
          class="w-[15px] h-[15px]"
          icon="radix-icons:font-bold"
        />
      </ToolbarToggleItem>
      <ToolbarToggleItem
        class="flex-shrink-0 flex-grow-0 basis-auto text-mauve11 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-green3 hover:text-grass11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7 first:ml-0 data-[state=on]:bg-green5 data-[state=on]:text-grass11"
        value="italic"
        aria-label="Italic"
      >
        <Icon
          class="w-[15px] h-[15px]"
          icon="radix-icons:font-italic"
        />
      </ToolbarToggleItem>
      <ToolbarToggleItem
        class="flex-shrink-0 flex-grow-0 basis-auto text-mauve11 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-green3 hover:text-grass11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7 first:ml-0 data-[state=on]:bg-green5 data-[state=on]:text-grass11"
        value="strikethrough"
        aria-label="Strike through"
      >
        <Icon
          class="w-[15px] h-[15px]"
          icon="radix-icons:strikethrough"
        />
      </ToolbarToggleItem>
    </ToolbarToggleGroup>
    <ToolbarSeparator class="w-[1px] bg-mauve6 mx-[10px]" />
    <ToolbarToggleGroup
      v-model="toggleStateSingle"
      type="single"
      aria-label="Text Alignment"
    >
      <ToolbarToggleItem
        class="flex-shrink-0 flex-grow-0 basis-auto text-mauve11 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-green3 hover:text-grass11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7 first:ml-0 data-[state=on]:bg-green5 data-[state=on]:text-grass11"
        value="left"
        aria-label="Left Aligned"
      >
        <Icon
          class="w-[15px] h-[15px]"
          icon="radix-icons:text-align-left"
        />
      </ToolbarToggleItem>
      <ToolbarToggleItem
        class="flex-shrink-0 flex-grow-0 basis-auto text-mauve11 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-green3 hover:text-grass11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7 first:ml-0 data-[state=on]:bg-green5 data-[state=on]:text-grass11"
        value="center"
        aria-label="Center Aligned"
      >
        <Icon
          class="w-[15px] h-[15px]"
          icon="radix-icons:text-align-center"
        />
      </ToolbarToggleItem>
      <ToolbarToggleItem
        class="flex-shrink-0 flex-grow-0 basis-auto text-mauve11 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-green3 hover:text-grass11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7 first:ml-0 data-[state=on]:bg-green5 data-[state=on]:text-grass11"
        value="right"
        aria-label="Right Aligned"
      >
        <Icon
          class="w-[15px] h-[15px]"
          icon="radix-icons:text-align-right"
        />
      </ToolbarToggleItem>
    </ToolbarToggleGroup>
    <ToolbarSeparator class="w-[1px] bg-mauve6 mx-[10px]" />
    <ToolbarLink
      class="bg-transparent !font-normal !text-mauve11 inline-flex justify-center items-center hover:bg-transparent hover:cursor-pointer flex-shrink-0 flex-grow-0 basis-auto h-[25px] px-[5px] rounded text-[13px] leading-none bg-white ml-0.5 outline-none hover:bg-green3 hover:text-grass11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7 first:ml-0 data-[state=on]:bg-green5 data-[state=on]:text-grass11"
      href="#"
      target="_blank"
      style="margin-right: 10"
    >
      Edited 2 hours ago
    </ToolbarLink>
    <ToolbarButton
      class="px-[10px] text-white bg-green9 flex-shrink-0 flex-grow-0 basis-auto h-[25px] rounded inline-flex text-[13px] leading-none items-center justify-center outline-none hover:bg-green10 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7"
      style="margin-left: auto"
    >
      Share
    </ToolbarButton>
  </ToolbarRoot>
</template>

機能 ​

  • フルキーボードナビゲーション。

インストール ​

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

sh
$ npm add radix-vue

構成 ​

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

vue
<script setup lang="ts">
import {
  ToolbarButton,
  ToolbarLink,
  ToolbarRoot,
  ToolbarSeparator,
  ToolbarToggleGroup,
  ToolbarToggleItem,
} from 'radix-vue'
</script>

<template>
  <ToolbarRoot>
    <ToolbarButton />
    <ToolbarSeparator />
    <ToolbarLink />
    <ToolbarToggleGroup>
      <ToolbarToggleItem />
    </ToolbarToggleGroup>
  </ToolbarRoot>
</template>

APIリファレンス ​

ルート ​

すべてのツールバーコンポーネント部品を含みます。

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

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

asChild
boolean

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

詳細については、コンポジションガイドを参照してください。

dir
'ltr' | 'rtl'

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

loop
boolean

`true`の場合、キーボードナビゲーションは最後のタブから最初のタブへ、そしてその逆もループします。

orientation
'horizontal'
'vertical' | 'horizontal'

ツールバーの方向

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

ボタン ​

ボタンアイテム。

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

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

asChild
boolean

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

詳細については、コンポジションガイドを参照してください。

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

リンクアイテム。

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

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

asChild
boolean

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

詳細については、コンポジションガイドを参照してください。

トグルグループ ​

オンまたはオフに切り替えることができる2状態のボタンのセット。

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

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

asChild
boolean

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

詳細については、コンポジションガイドを参照してください。

defaultValue
string | string[]

アイテムのデフォルトのアクティブな値。

アイテムの状態を制御する必要がない場合に使用します。

dir
'ltr' | 'rtl'

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

disabled
boolean

`true`の場合、ユーザーがトグルグループとそのすべてのアイテムとのインタラクションを妨げます。

loop
boolean

`loop`と`rovingFocus`が`true`の場合、キーボードナビゲーションは最後のアイテムから最初のアイテムへ、そしてその逆もループします。

modelValue
string | string[]

アクティブなアイテムの制御された値。

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

orientation
'vertical' | 'horizontal'

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

rovingFocus
boolean

`false`の場合、矢印キーを使用したアイテム間のナビゲーションが無効になります。

type
'single' | 'multiple'

一度に押すことができるアイテムの数を決定します。「single」または「multiple」。

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

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

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

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

トグルアイテム ​

グループ内のアイテム。

プロパティデフォルト型
as
'div'
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"

セパレーター ​

ツールバー内のアイテムを視覚的に区切るために使用します。

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

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

asChild
boolean

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

詳細については、コンポジションガイドを参照してください。

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

例 ​

他のプリミティブとの使用 ​

`Trigger`部分を公開するすべてのプリミティブ（`Dialog`、`AlertDialog`、`Popover`、`DropdownMenu`など）は、`asChild`プロパティを使用してツールバー内に構成できます。

`DropdownMenu`プリミティブを使用した例を次に示します。

vue
<script setup lang="ts">
import {
  DropdownMenuContent,
  DropdownMenuRoot,
  DropdownMenuTrigger,
  ToolbarButton,
  ToolbarLink,
  ToolbarRoot,
  ToolbarSeparator,
  ToolbarToggleGroup,
  ToolbarToggleItem,
} from 'radix-vue'
</script>

<template>
  <ToolbarRoot>
    <ToolbarButton>Action 1</ToolbarButton>
    <ToolbarSeparator />
    <DropdownMenuRoot>
      <ToolbarButton as-child>
        <DropdownMenuTrigger>Trigger</DropdownMenuTrigger>
      </ToolbarButton>
      <DropdownMenuContent>…</DropdownMenuContent>
    </DropdownMenuRoot>
  </ToolbarRoot>
</template>

アクセシビリティ ​

アイテム間のフォーカス移動を管理するために、ロービングタブインデックスを使用します。

キーボード操作 ​

キー説明
Tab
フォーカスをグループの最初のアイテムに移動します。
Space
アイテムをアクティブ化/非アクティブ化します。
Enter
アイテムをアクティブ化/非アクティブ化します。
ArrowDown
`orientation`に応じて、フォーカスを次のアイテムに移動します。
ArrowRight
`orientation`に応じて、フォーカスを次のアイテムに移動します。
ArrowUp
`orientation`に応じて、フォーカスを前のアイテムに移動します。
ArrowLeft
`orientation`に応じて、フォーカスを前のアイテムに移動します。
Home
フォーカスを最初のアイテムに移動します。
End
フォーカスを最後のアイテムに移動します。