分割器

分割器用於分隔和調整面板大小。

匯入 #


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

水平 #

分割器需要兩個作為子項的 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>

巢狀 #

分割器可以組合以建立進階版面配置。

面板 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>

輔助功能 #

螢幕閱讀器

分割器分隔條定義角色為 separator，並將 aria-orientation 設定為水平或垂直。

鍵盤支援

按鍵	功能
tab	將焦點移動到分割器分隔條上。
向下箭頭	向下移動垂直分割器。
向上箭頭	向上移動垂直分割器。
向左箭頭	向左移動水平分割器。
向右箭頭	向右移動水平分割器。

分割器

匯入 #

水平 #

大小 #

垂直 #

巢狀 #

輔助功能 #

螢幕閱讀器

鍵盤支援

分割器 API