Splitter 分割面板
Layout
自动交互
简介
一种结构化的布局组件，可将空间划分为多个由高对比度视觉分隔线隔开的内容区域。它旨在将复杂的子模块或侧边栏整齐地归组在一个统一的容器区块中。
Splitter 组件已在 Page Builder 中作为 splitter 区块完整集成。这让内容编辑者与开发者能够直接在 CMS 内轻松将布局组织为水平并排或垂直堆叠的面板。
用法
以下示例展示了内容编辑者如何配置并组织可调整尺寸的分割器容器。
1. 水平仪表盘分割器
将布局划分为左侧导航/信息栏与右侧主内容区。非常适合工作区布局、技术文档页面或并排的产品展示。
{
"type": "splitter",
"orientation": "horizontal",
"panels": [
{
"id": "left",
"content": [
{
"blockType": "text",
"content": "Left Panel (Sidebar)"
}
]
},
{
"id": "right",
"content": [
{
"blockType": "text",
"content": "Right Panel (Main Content)"
}
]
}
]
}
2. 垂直堆叠分割器
将内容区域垂直堆叠，由一条水平分隔线隔开。适合划分代码游乐场、堆叠内容信息流，或预览与编辑并存的仪表盘区块。
{
"type": "splitter",
"orientation": "vertical",
"panels": [
{
"id": "top",
"content": [
{
"blockType": "text",
"content": "Top Section (Code / Editor)"
}
]
},
{
"id": "bottom",
"content": [
{
"blockType": "text",
"content": "Bottom Section (Live Preview)"
}
]
}
]
}
属性
| 属性 | CMS 字段类型 | 默认值 | 说明 / 可选项 |
|---|---|---|---|
布局方向 (orientation) | select | "horizontal" | 分割器面板的视觉方向。 • 选项： "horizontal"（并排）、"vertical"（堆叠）。 |
面板 (panels) | list | - | 嵌套面板配置区块的列表。每个面板包含： • 唯一标识 ( id)：面板的唯一标识字符串。• 内容 ( content)：可嵌套页面区块的列表。 |
开发者说明与无障碍
- 静态内容编译： 为保证零水合延迟与极致性能，经由 CMS Page Builder 编译的 Splitter 区块始终以静态展示模式渲染（
interactive={false}）。由于面板的content持有任意嵌套的 JSX 区块元素，保持静态可避免岛屿水合期间出现的序列化边界问题。 - 纯 CSS Flexbox 布局： 静态 Splitter 布局被编译为轻量的纯 CSS Flexbox 行或列。这消除了加载时任何 JavaScript 布局执行的需求，完全避免布局抖动（CLS）。
- WAI-ARIA 布局角色： 生成语义化的布局属性，清晰标识面板分组。水平与垂直分隔线会被编译为标准分隔符（
role="separator"），帮助屏幕阅读器用户理解布局转变。