スプリッター

Splitter は、パネルを分割およびサイズ変更するために使用されます。

インポート#


import { Splitter, SplitterPanel } from 'primereact/splitter';
         

水平方向#

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


<Splitter style={{ height: '300px' }}>
    <SplitterPanel className="flex align-items-center justify-content-center">Panel 1</SplitterPanel>
    <SplitterPanel className="flex align-items-center justify-content-center">Panel 2</SplitterPanel>
</Splitter>
         

サイズ#

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


<Splitter style={{ height: '300px' }}>
    <SplitterPanel className="flex align-items-center justify-content-center" size={25} minSize={10}>Panel 1</SplitterPanel>
    <SplitterPanel className="flex align-items-center justify-content-center" size={75}>Panel 2</SplitterPanel>
</Splitter>
         

垂直方向#

*layout* を *vertical* に設定することにより、パネルはスタックされて表示されます。


<Splitter style={{ height: '300px' }} layout="vertical">
    <SplitterPanel className="flex align-items-center justify-content-center">Panel 1</SplitterPanel>
    <SplitterPanel className="flex align-items-center justify-content-center">Panel 2</SplitterPanel>
</Splitter>
         

ネスト#

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


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

アクセシビリティ#

スクリーンリーダー

Splitter バーは、*aria-orientation* を水平または垂直に設定した *separator* をロールとして定義します。

キーボードサポート

キー機能
tabSplitter バーを通してフォーカスを移動します。
下矢印垂直 Splitter を下に移動します。
上矢印垂直 Splitter を上に移動します。
左矢印垂直 Splitter を左に移動します。
右矢印垂直 Splitter を右に移動します。
homeプライマリパネルを最大化します。
endプライマリパネルを最小化します。
enterプライマリパネルを最小サイズと最大サイズの間で切り替えます。
              PrimeReact 10.8.3 by PrimeTek