分割器

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

导入#


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

水平#

分割器需要两个 SplitterPanel 组件作为子组件，默认情况下水平显示。

面板 1

面板 2


<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 以在调整大小时设置最小值。

面板 1

面板 2


<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，面板将以堆叠方式显示。

面板 1

面板 2


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

嵌套#

分割器可以组合起来创建高级布局。

面板 1

面板 2

面板 3

面板 4


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

可访问性#

屏幕阅读器

分割条定义 separator 为角色，aria-orientation 设置为 horizontal 或 vertical。

键盘支持

按键	功能
tab	在分割条之间移动焦点。
向下箭头	向下移动垂直分割器。
向上箭头	向上移动垂直分割器。
向左箭头	向左移动垂直分割器。
向右箭头	向右移动垂直分割器。
home	最大化主面板。
end	最小化主面板。
enter	在最小和最大尺寸之间切换主面板。