Splitter

Splitterは、パネルを分離してサイズ変更するために使用されます。

インポート # 


import Splitter from 'primevue/splitter';
import SplitterPanel from 'primevue/splitterpanel';

水平方向 #

Splitterは、デフォルトで水平方向に表示される2つのSplitterPanelコンポーネントを子として必要とします。

パネル1
パネル2

<Splitter style="height: 300px" class="mb-8">
    <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
    <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
</Splitter>

サイズ #

パネルの初期寸法はパーセンテージベースであり、sizeプロパティを使用して定義されます。さらに、サイズ変更時に最小値を設定するためにminSizeが提供されます。

パネル1
パネル2

<Splitter style="height: 300px">
    <SplitterPanel class="flex items-center justify-center" :size="25" :minSize="10"> Panel 1 </SplitterPanel>
    <SplitterPanel class="flex items-center justify-center" :size="75"> Panel 2 </SplitterPanel>
</Splitter>

垂直方向 #

layoutをverticalに設定することで、パネルは積み重ねて表示されます。

パネル1
パネル2

<Splitter style="height: 300px" layout="vertical">
    <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
    <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
</Splitter>

ネスト #

Splitterを組み合わせて高度なレイアウトを作成できます。

パネル1
パネル2
パネル3
パネル4

<Splitter style="height: 300px">
    <SplitterPanel class="flex items-center justify-center" :size="20" :minSize="10"> Panel 1 </SplitterPanel>
    <SplitterPanel :size="80">
        <Splitter layout="vertical">
            <SplitterPanel class="flex items-center justify-center" :size="15"> Panel 2 </SplitterPanel>
            <SplitterPanel :size="85">
                <Splitter>
                    <SplitterPanel class="flex items-center justify-center" :size="20"> Panel 3 </SplitterPanel>
                    <SplitterPanel class="flex items-center justify-center" :size="80"> Panel 4 </SplitterPanel>
                </Splitter>
            </SplitterPanel>
        </Splitter>
    </SplitterPanel>
</Splitter>

アクセシビリティ #

スクリーンリーダー

Splitterバーは、aria-orientationが水平または垂直のいずれかに設定された役割としてseparatorを定義します。

キーボードサポート

キー機能
タブSplitterバーを介してフォーカスを移動します。
下矢印垂直方向のSplitterを下に移動します。
上矢印垂直方向のSplitterを上に移動します。
左矢印水平方向のSplitterを左に移動します。
右矢印水平方向のSplitterを右に移動します。
PrimeTekによるVue 3上のPrimeVue 4.0.7 PrimeTek