Radix Vue

外観

スプリッター ​

アルファ
レイアウトをリサイズ可能なセクションに分割するコンポーネント。
パネルA
パネルB
パネルC
vue
<script setup lang="ts">
import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from 'radix-vue'
</script>

<template>
  <div class="w-full h-64 px-8 text-green9 font-medium text-sm">
    <SplitterGroup
      id="splitter-group-1"
      direction="horizontal"
    >
      <SplitterPanel
        id="splitter-group-1-panel-1"
        :min-size="20"
        class="bg-white rounded-xl flex items-center justify-center"
      >
        Panel A
      </SplitterPanel>
      <SplitterResizeHandle
        id="splitter-group-1-resize-handle-1"
        class="w-2"
      />
      <SplitterPanel
        id="splitter-group-1-panel-2"
        :min-size="20"
      >
        <SplitterGroup
          id="splitter-group-2"
          direction="vertical"
        >
          <SplitterPanel
            id="splitter-group-2-panel-1"
            :min-size="20"
            class="bg-white rounded-xl flex items-center justify-center"
          >
            Panel B
          </SplitterPanel>
          <SplitterResizeHandle
            id="splitter-group-2-resize-handle-1"
            class="h-2"
          />
          <SplitterPanel
            id="splitter-group-2-panel-2"
            :min-size="20"
            class="bg-white rounded-xl flex items-center justify-center"
          >
            Panel C
          </SplitterPanel>
        </SplitterGroup>
      </SplitterPanel>
    </SplitterGroup>
  </div>
</template>

クレジット

このコンポーネントは、Bryan Vaughn氏のreact-resizable-panelsに大きく影響を受けています。

機能 ​

  • キーボード操作に対応。
  • 水平/垂直レイアウトに対応。
  • ネストされたレイアウトに対応。
  • 右から左への方向に対応。
  • 別のパネルをまたいでリサイズ可能。
  • 条件付きでマウント可能。

インストール ​

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

sh
$ npm add radix-vue

構成 ​

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

vue
<script setup>
import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from 'radix-vue'
</script>

<template>
  <SplitterGroup>
    <SplitterPanel />
    <SplitterResizeHandle />
  </SplitterGroup>
</template>

APIリファレンス ​

グループ ​

スプリッターのすべてのパーツを含みます。

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

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

asChild
boolean

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

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

autoSaveId
null
string | null

localStorageを介してグループの配置を自動保存するために使用される一意のID。

direction*
'vertical' | 'horizontal'

スプリッターのグループの向き。

id
string | null

グループID。提供されない場合はuseIdにフォールバックします。

keyboardResizeBy
10
number | null

矢印キーが押されたときのステップサイズ。

storage
defaultStorage
PanelGroupStorage

カスタムストレージAPI。デフォルトはlocalStorageです。

エミットペイロード
layout
[val: number[]]

グループのレイアウトが変更されたときに呼び出されるイベントハンドラー

スロット (デフォルト)ペイロード
layout
number[]

レイアウトの現在のサイズ

データ属性値
[data-orientation]"vertical" | "horizontal"
[data-state]"collapsed" | "expanded" | 「折りたたみ可能」の場合に存在

パネル ​

折りたたみ可能なセクション。

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

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

asChild
boolean

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

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

collapsedSize
number

パネルが折りたたまれたときのサイズ。

collapsible
boolean

minSizeを超えてリサイズされたときにパネルを折りたたむかどうか。trueの場合、collapsedSizeに折りたたまれます。

defaultSize
number

パネルの初期サイズ（1〜100の数値）

id
string

パネルID（グループ内で一意）。提供されない場合はuseIdにフォールバックします

maxSize
number

パネルの最大許容サイズ（1〜100の数値）。デフォルトは100

minSize
number

パネルの最小許容サイズ（1〜100の数値）。デフォルトは10

order
number

グループ内のパネルの順序。条件付きでレンダリングされるパネルを含むグループに必要

エミットペイロード
collapse
[]

パネルが折りたたまれたときに呼び出されるイベントハンドラー。

expand
[]

パネルが展開されたときに呼び出されるイベントハンドラー。

resize
[size: number, prevSize: number]

パネルがリサイズされたときに呼び出されるイベントハンドラー。sizeパラメーターは1〜100の数値です。

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

パネルは折りたたまれていますか

isExpanded
boolean

パネルは展開されていますか

メソッドタイプ
collapse
() => void

パネルがcollapsibleの場合、完全に折りたたみます。

expand
() => void

パネルが現在折りたたまれている場合は、最新のサイズに展開します。

getSize
() => number

パネルの現在のサイズをパーセンテージ（1〜100）で取得します。

resize
(size: number) => void

パネルを指定されたパーセンテージ（1〜100）にリサイズします。

リサイズハンドル ​

リサイズに使用するハンドル。

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

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

asChild
boolean

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

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

disabled
boolean

ドラッグハンドルを無効にする

hitAreaMargins
PointerHitAreaMargins

リサイズ可能なハンドルのヒット検出を決定する際に、このマージンを許可します

id
string

リサイズハンドルID（グループ内で一意）。提供されない場合はuseIdにフォールバックします

tabindex
0
number

ハンドルのタブインデックス

エミットペイロード
dragging
[isDragging: boolean]

ハンドラーをドラッグしているときに呼び出されるイベントハンドラー。

データ属性値
[data-state]"drag" | "hover" | "inactive"
[data-disabled]無効の場合に存在
[data-orientation]"vertical" | "horizontal"

例 ​

折りたたみ可能 ​

collapsibleプロパティを使用して、minSizeに達したときにパネルをcollapsedSizeに折りたためるようにします。

（collapsedSizeとminSizeプロパティが必要です。）

vue
<template>
  <SplitterGroup>
    <SplitterPanel
      collapsible
      :collapsed-size="10"
      :min-size="35"
    >
      Panel A
    </SplitterPanel>
    <SplitterResizeHandle />
    <SplitterPanel>
      Panel B
    </SplitterPanel>
  </SplitterGroup>
</template>

localStorageに永続化 ​

autoSaveIdプロパティを使用して、レイアウトデータをlocalStorageに保存します。

vue
<template>
  <SplitterGroup auto-save-id="any-id">
    …
  </SplitterGroup>
</template>

SSRでレイアウトを永続化 ​

デフォルトでは、スプリッターはlocalStorageを使用してレイアウトを永続化します。サーバーレンダリングでは、デフォルトのレイアウト（サーバーでレンダリング）が永続化されたレイアウト（localStorage内）に置き換えられるときにちらつきが発生する可能性があります。このちらつきを回避する方法は、次のようにCookieを使用してレイアウトを永続化することです。

vue
<!-- with Nuxt -->
<script setup lang="ts">
const layout = useCookie<number[]>('splitter:layout')
</script>

<template>
  <SplitterGroup
    direction="horizontal"
    @layout="layout = $event"
  >
    <SplitterPanel :default-size="layout[0]">
      …
    </SplitterPanel>
    <SplitterResizeHandle />
    <SplitterPanel :default-size="layout[1]">
      …
    </SplitterPanel>
  </SplitterGroup>
</template>

プログラムで折りたたみ/展開 ​

ユーザー操作に応じてパネルをリサイズまたは折りたたみ/展開する必要がある場合があります。SplitterPanelは、これを実現するためにcollapseおよびexpandメソッドを公開します。

vue
<script setup lang="ts">
const panelRef = ref<InstanceType<typeof SplitterPanel>>()
</script>

<template>
  <button
    @click="panelRef?.isCollapsed ? panelRef?.expand() : panelRef?.collapse() "
  >
    {{ panelRef?.isCollapsed ? 'Expand' : 'Collapse' }}
  </button>

  <SplitterGroup>
    <SplitterPanel
      ref="panelRef"
      collapsible
      :collapsed-size="10"
      :min-size="35"
    >
      …
    </SplitterPanel>
    <SplitterResizeHandle />
    <SplitterPanel>
      …
    </SplitterPanel>
  </SplitterGroup>
</template>

カスタムハンドル ​

任意の要素をスロットとして渡すことでハンドルをカスタマイズします。

vue
<template>
  <SplitterGroup>
    <SplitterPanel>
      …
    </SplitterPanel>
    <SplitterResizeHandle>
      <Icon icon="radix-icons-drag-handle-dots-2" />
    </SplitterResizeHandle>
    <SplitterPanel>
      …
    </SplitterPanel>
  </SplitterGroup>
</template>

SSR ​

スプリッターコンポーネントは一意のidに大きく依存していますが、Vue < 3.4では、SSR対応のidを生成する信頼できる方法がありません。

したがって、Nuxtまたはその他のSSRフレームワークを使用している場合は、すべてのスプリッターコンポーネントに手動でidを追加する必要があります。または、コンポーネントを<ClientOnly>でラップすることもできます。

vue
<template>
  <SplitterGroup id="group-1">
    <SplitterPanel id="group-1-panel-1">
      …
    </SplitterPanel>
    <SplitterResizeHandle id="group-1-resize-1">
      <Icon icon="radix-icons-drag-handle-dots-2" />
    </SplitterResizeHandle>
    <SplitterPanel id="group-1-panel-2">
      …
    </SplitterPanel>
  </SplitterGroup>
</template>

アクセシビリティ ​

ウィンドウ分割器 WAI-ARIA デザインパターンに準拠します。

キーボード操作 ​

キー説明
Enter
プライマリペインが折りたたまれていない場合は、ペインを折りたたみます。ペインが折りたたまれている場合は、スプリッターを以前の位置に戻します。
ArrowDown
水平スプリッターを下に移動します。
ArrowUp
水平スプリッターを上に移動します。
ArrowRight
垂直スプリッターを右に移動します。
ArrowLeft
垂直スプリッターを左に移動します。
Home
プライマリペインが最小許容サイズになる位置にスプリッターを移動します。
End
プライマリペインが最大許容サイズになる位置にスプリッターを移動します。