分割器

分割器用于分隔和调整面板大小。

导入 # 


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在分割条之间移动焦点。
向下箭头向下移动垂直分割器。
向上箭头向上移动垂直分割器。
向左箭头向左移动水平分割器。
向右箭头向右移动水平分割器。
PrimeVue 4.2.5 on Vue 3 by PrimeTek