Radix Vue

外観

アコーディオン ​

関連するコンテンツセクションを表示する、縦に積み重ねられたインタラクティブな見出しのセット。

vue
<script setup lang="ts">
import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger } from 'radix-vue'
import { Icon } from '@iconify/vue'

const accordionItems = [
  {
    value: 'item-1',
    title: 'Is it accessible?',
    content: 'Yes. It adheres to the WAI-ARIA design pattern.',
  },
  {
    value: 'item-2',
    title: 'Is it unstyled?',
    content: 'Yes. It\'s unstyled by default, giving you freedom over the look and feel.',
  },
  {
    value: 'item-3',
    title: 'Can it be animated?',
    content: 'Yes! You can use the transition prop to configure the animation.',
  },
]
</script>

<template>
  <AccordionRoot
    class="bg-mauve6 w-[300px] rounded-md shadow-[0_2px_10px] shadow-black/5"
    default-value="item-1"
    type="single"
    :collapsible="true"
  >
    <template
      v-for="item in accordionItems"
      :key="item.value"
    >
      <AccordionItem
        class="focus-within:shadow-mauve12 mt-px overflow-hidden first:mt-0 first:rounded-t last:rounded-b focus-within:relative focus-within:z-10 focus-within:shadow-[0_0_0_2px]"
        :value="item.value"
      >
        <AccordionHeader class="flex">
          <AccordionTrigger class="text-grass11 shadow-mauve6 hover:bg-mauve2 flex h-[45px] flex-1 cursor-default items-center justify-between bg-white px-5 text-[15px] leading-none shadow-[0_1px_0] outline-none group">
            <span>{{ item.title }}</span>
            <Icon
              icon="radix-icons:chevron-down"
              class="text-green10 ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180"
              aria-label="Expand/Collapse"
            />
          </AccordionTrigger>
        </AccordionHeader>
        <AccordionContent class="text-mauve11 bg-mauve2 data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden text-[15px]">
          <div class="px-5 py-4">
            {{ item.content }}
          </div>
        </AccordionContent>
      </AccordionItem>
    </template>
  </AccordionRoot>
</template>

機能 ​

  • フルキーボードナビゲーション。
  • 水平/垂直方向の向きをサポート。
  • 右から左への方向をサポート。
  • 1つまたは複数のアイテムを展開できます。
  • 制御または非制御にできます。

インストール ​

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

sh
$ npm add radix-vue

構成 ​

すべてのパーツをインポートして組み合わせます。

vue
<script setup>
import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger } from 'radix-vue'
</script>

<template>
  <AccordionRoot>
    <AccordionItem>
      <AccordionHeader>
        <AccordionTrigger />
      </AccordionHeader>
      <AccordionContent />
    </AccordionItem>
  </AccordionRoot>
</template>

APIリファレンス ​

ルート ​

アコーディオンのすべてのパーツが含まれています

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

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

asChild
boolean

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

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

collapsible
false
boolean

タイプが「single」の場合、開いているアイテムのトリガーをクリックすると、コンテンツを閉じることができます。タイプが「multiple」の場合、このプロパティは効果がありません。

defaultValue
string | string[]

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

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

dir
'ltr' | 'rtl'

該当する場合のアコーディオンの読み取り方向。省略すると、LTR（左から右）の読み取りモードと見なされます。

disabled
false
boolean

trueの場合、ユーザーがアコーディオンとそのすべてのアイテムを操作することを防ぎます

modelValue
string | string[]

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

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

orientation
'vertical'
'vertical' | 'horizontal'

アコーディオンの向き。

type
'single' | 'multiple'

一度に「単一」または「複数」のアイテムを押すことができるかどうかを決定します。

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

Emitペイロード
update:modelValue
[value: string | string[]]

アイテムの展開状態が変化したときに呼び出されるイベントハンドラー

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

現在のアクティブな値

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

アイテム ​

折りたたみ可能なセクションのすべてのパーツが含まれています。

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

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

asChild
boolean

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

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

disabled
boolean

アコーディオンアイテムがユーザーの操作から無効になっているかどうか。trueの場合、ユーザーがアイテムを操作することを防ぎます。

value*
string

アコーディオンアイテムの文字列値。アコーディオン内のすべてのアイテムは一意の値を使用する必要があります。

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

現在の開いている状態

データ属性値
[data-state]"open" | "closed"
[data-disabled]無効の場合に表示
[data-orientation]"vertical" | "horizontal"

AccordionTriggerをラップします。asChildプロパティを使用して、ページに適した見出しレベルに更新します。

プロパティデフォルトタイプ
as
'h3'
AsTag | コンポーネント

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

asChild
boolean

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

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

データ属性値
[data-state]"open" | "closed"
[data-disabled]無効の場合に表示
[data-orientation]"vertical" | "horizontal"

トリガー ​

関連付けられたアイテムの折りたたまれた状態を切り替えます。AccordionHeaderの中にネストする必要があります。

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

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

asChild
boolean

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

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

データ属性値
[data-state]"open" | "closed"
[data-disabled]無効の場合に表示
[data-orientation]"vertical" | "horizontal"

コンテンツ ​

アイテムの折りたたみ可能なコンテンツが含まれています。

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

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

asChild
boolean

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

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

データ属性値
[data-state]"open" | "closed"
[data-disabled]無効の場合に表示
[data-orientation]"vertical" | "horizontal"
CSS変数説明
--radix-accordion-content-width
コンテンツが開閉するときの幅
--radix-accordion-content-height
コンテンツが開閉するときの高さ

例 ​

デフォルトで展開 ​

defaultValueプロパティを使用して、デフォルトで開いているアイテムを定義します。

vue
<template>
  <AccordionRoot
    type="single"
    default-value="item-2"
  >
    <AccordionItem value="item-1">
      …
    </AccordionItem>
    <AccordionItem value="item-2">
      …
    </AccordionItem>
  </AccordionRoot>
</template>

すべてのアイテムの折りたたみ許可 ​

collapsibleプロパティを使用して、すべてのアイテムを閉じることを許可します。

vue
<template>
  <AccordionRoot
    type="single"
    collapsible
  >
    <AccordionItem value="item-1">
      …
    </AccordionItem>
    <AccordionItem value="item-2">
      …
    </AccordionItem>
  </AccordionRoot>
</template>

複数のアイテムを同時に開く ​

typeプロパティをmultipleに設定して、複数のアイテムを一度に開くことを有効にします。

vue
<template>
  <AccordionRoot type="multiple">
    <AccordionItem value="item-1">
      …
    </AccordionItem>
    <AccordionItem value="item-2">
      …
    </AccordionItem>
  </AccordionRoot>
</template>

開いているときに回転するアイコン ​

シェブロンなどの装飾要素を追加し、アイテムが開いているときに回転させることができます。

vue
// index.vue
<script setup>
import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger } from 'radix-vue'
import { Icon } from '@iconify/vue'
import './styles.css'
</script>

<template>
  <AccordionRoot type="single">
    <AccordionItem value="item-1">
      <AccordionHeader>
        <AccordionTrigger class="AccordionTrigger">
          <span>Trigger text</span>
          <Icon
            icon="radix-icons:chevron-down"
            class="AccordionChevron"
          />
        </AccordionTrigger>
      </AccordionHeader>
      <AccordionContent>…</AccordionContent>
    </AccordionItem>
  </AccordionRoot>
</template>
css
/* styles.css */
.AccordionChevron {
  transition: transform 300ms;
}
.AccordionTrigger[data-state="open"] > .AccordionChevron {
  transform: rotate(180deg);
}

水平方向の向き ​

orientationプロパティを使用して、水平方向のアコーディオンを作成します

vue
<template>
  <AccordionRoot orientation="horizontal">
    <AccordionItem value="item-1">
      …
    </AccordionItem>
    <AccordionItem value="item-2">
      …
    </AccordionItem>
  </AccordionRoot>
</template>

コンテンツサイズの調整 ​

--radix-accordion-content-widthおよび/または--radix-accordion-content-height CSS変数を使用して、コンテンツが開閉するときのサイズを調整します

vue
// index.vue
<script setup>
import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger } from 'radix-vue'
import './styles.css'
</script>

<template>
  <AccordionRoot type="single">
    <AccordionItem value="item-1">
      <AccordionHeader>…</AccordionHeader>
      <AccordionContent class="AccordionContent">
        …
      </AccordionContent>
    </AccordionItem>
  </AccordionRoot>
</template>
css
/* styles.css */
.AccordionContent {
  overflow: hidden;
}
.AccordionContent[data-state="open"] {
  animation: slideDown 300ms ease-out;
}
.AccordionContent[data-state="closed"] {
  animation: slideUp 300ms ease-out;
}

@keyframes slideDown {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}

@keyframes slideUp {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}

アクセシビリティ ​

アコーディオンWAI-ARIAデザインパターンに準拠しています。

キーボード操作 ​

キー説明
スペース
フォーカスが折りたたまれたセクションのAccordionTriggerにある場合、セクションを展開します。
Enter
フォーカスが折りたたまれたセクションのAccordionTriggerにある場合、セクションを展開します。
Tab
フォーカス可能な次の要素にフォーカスを移動します。
Shift + Tab
フォーカス可能な前の要素にフォーカスを移動します。
ArrowDown
orientationがverticalの場合、フォーカスを次のAccordionTriggerに移動します。
ArrowUp
orientationがverticalの場合、フォーカスを前のAccordionTriggerに移動します。
ArrowRight
orientationがhorizontalの場合、フォーカスを次のAccordionTriggerに移動します。
ArrowLeft
orientationがhorizontalの場合、フォーカスを前のAccordionTriggerに移動します。
Home
フォーカスがAccordionTriggerにある場合、フォーカスを先頭のAccordionTriggerに移動します。
End
フォーカスがAccordionTriggerにある場合、フォーカスを最後のAccordionTriggerに移動します。