Radix Vue

外観

折り畳み式コンポーネント ​

パネルを展開/折り畳むインタラクティブなコンポーネントです。
@peduarte が3つのリポジトリにスターをつけました
@radix-vue/radix-vue
vue
<script setup lang="ts">
import { ref } from 'vue'
import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'radix-vue'
import { Icon } from '@iconify/vue'

const open = ref(false)
</script>

<template>
  <CollapsibleRoot
    v-model:open="open"
    class="w-[300px]"
  >
    <div style="display: flex; align-items: center; justify-content: space-between">
      <span class="text-white text-[15px] leading-[25px]"> @peduarte starred 3 repos </span>
      <CollapsibleTrigger
        class="cursor-default rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-grass11 shadow-[0_2px_10px] shadow-blackA7 outline-none data-[state=closed]:bg-white data-[state=open]:bg-green3 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black"
      >
        <Icon
          v-if="open"
          icon="radix-icons:cross-2"
          class="h-3.5 w-3.5"
        />
        <Icon
          v-else
          icon="radix-icons:row-spacing"
          class="h-3.5 w-3.5"
        />
      </CollapsibleTrigger>
    </div>

    <div class="bg-white rounded mt-[10px] p-[10px] shadow-[0_2px_10px] shadow-blackA7">
      <span class="text-grass11 text-[15px] leading-[25px]">@radix-vue/radix-vue</span>
    </div>

    <CollapsibleContent class="data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden">
      <div class="bg-white rounded my-[10px] p-[10px] shadow-[0_2px_10px] shadow-blackA7">
        <span class="text-grass11 text-[15px] leading-[25px]">@vuejs/core</span>
      </div>
      <div class="bg-white rounded my-[10px] p-[10px] shadow-[0_2px_10px] shadow-blackA7">
        <span class="text-grass11 text-[15px] leading-[25px]">@radix-ui/primitives</span>
      </div>
    </CollapsibleContent>
  </CollapsibleRoot>
</template>

機能 ​

  • 完全なキーボードナビゲーション。
  • 制御可能または非制御可能。

インストール ​

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

sh
$ npm add radix-vue

構成 ​

コンポーネントをインポートし、パーツを組み合わせてください。

vue
<script setup>
import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'radix-vue'
</script>

<template>
  <CollapsibleRoot>
    <CollapsibleTrigger />
    <CollapsibleContent />
  </CollapsibleRoot>
</template>

APIリファレンス ​

ルート ​

折り畳み式コンポーネントのすべての部品を含みます

プロパティデフォルト値型
as
'div'
AsTag | Component

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

asChild
boolean

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

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

defaultOpen
false
boolean

初期レンダリング時の折り畳み式コンポーネントの開状態。
開状態を制御する必要がない場合に使用します。

disabled
boolean

trueの場合、ユーザーによる折り畳み式コンポーネントとのインタラクションを防止します。

open
boolean

折り畳み式コンポーネントの制御された開状態。`v-model`でバインドできます。

イベントペイロード
update:open
[value: boolean]

折り畳み式コンポーネントの開状態が変更されたときに呼び出されるイベントハンドラー。

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

現在の開状態

データ属性値
[data-state]"open" | "closed"
[data-disabled]無効の場合に表示されます

トリガー ​

折り畳み式コンポーネントを切り替えるボタン

プロパティデフォルト値型
as
'button'
AsTag | Component

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

asChild
boolean

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

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

データ属性値
[data-state]"open" | "closed"
[data-disabled]無効の場合に表示されます

コンテンツ ​

折り畳み式コンポーネントのコンテンツを含むコンポーネント。

プロパティデフォルト値型
as
'div'
AsTag | Component

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

asChild
boolean

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

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

forceMount
boolean

より詳細な制御が必要な場合にマウントを強制するために使用します。Vueアニメーションライブラリでアニメーションを制御する場合に便利です。

データ属性値
[data-state]"open" | "closed"
[data-disabled]無効の場合に表示されます
CSS変数説明
--radix-collapsible-content-width
展開/折り畳み時のコンテンツの幅
--radix-collapsible-content-height
展開/折り畳み時のコンテンツの高さ

例 ​

コンテンツサイズのアニメーション ​

--radix-collapsible-content-widthおよび/または--radix-collapsible-content-height CSS変数を使用して、展開/折り畳み時のコンテンツのサイズをアニメーション化します。デモはこちら

vue
// index.vue
<script setup>
import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'radix-vue'
import './styles.css'
</script>

<template>
  <CollapsibleRoot>
    <CollapsibleTrigger>…</CollapsibleTrigger>
    <CollapsibleContent class="CollapsibleContent">
      …
    </CollapsibleContent>
  </CollapsibleRoot>
</template>
css
/* styles.css */
.CollapsibleContent {
  overflow: hidden;
}
.CollapsibleContent[data-state="open"] {
  animation: slideDown 300ms ease-out;
}
.CollapsibleContent[data-state="closed"] {
  animation: slideUp 300ms ease-out;
}

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

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

アクセシビリティ ​

開閉式のWAI-ARIAデザインパターンに準拠しています。

キーボード操作 ​

キー説明
スペース
折り畳み式コンポーネントを開閉します
エンター
折り畳み式コンポーネントを開閉します