分割线
分割线用于在页面中对内容进行视觉分隔,可带标题并控制标题的位置与两侧留白。
概述
将「分割线」拖入画布后,在属性抽屉中配置标题与标题位置。标题支持系统环境变量占位符,未填写标题时即为一条普通分割线。
配置项
| 配置项 | 说明 |
|---|---|
| 标题 | 分割线上的标题文案,可为空 |
| 标题位置 | 标题的对齐位置:左 / 右 / 居中,默认「居中」 |
| 标题边距 | 标题两侧的间距(px),取值 0 ~ 1000,默认 0 |
使用建议
- 用于分隔表单分区、详情 区块时,带标题的分割线可起到小标题的作用。
- 仅需视觉分隔时,不填标题即可。
下一步
属性明细
以下内容面向技术实现与 AI 检索。所有 meta 键值均以字符串形式存储。
组件属性(meta)
| 属性名 | 类型 | 含义 | 取值/存储值 |
|---|---|---|---|
Title | string | 分割线标题 | 文本,支持系统环境变量占位符 |
Orientation | string | 标题位置 | left / right / center(默认) |
OrientationMargin | string(number) | 标题两侧间距(px) | 0(默认) ~ 1000,整数 |
GetSidebarItemMeta() 默认写入空的 meta({}),上述键在用户配置后写入。uid 固定为 c77d3e7d-4f00-430d-9aa3-db92d08f01fe。
存储示例
组件通常位于列(Column)内,以下为嵌套在行(Row)→ 列(Column)中的完整存储结构:
{
"id": "b2c3d4e5-0001-4a2b-8c3d-1234567890ab",
"uid": "5a0f3c1e-9b8d-4f6a-9c2e-7d1b4a8e6f3d",
"dragType": "Row",
"originalType": "Row",
"widgetType": "Row",
"widgetTypeName": "基础容器",
"meta": {
"ColumnSpace": "5"
},
"children": [
{
"id": "b2c3d4e5-0002-4a2b-8c3d-1234567890ab",
"uid": "7b9a905e-83d4-452b-83c8-694a3e0935e3",
"dragType": "Column",
"originalType": "Column",
"widgetType": "Column",
"widgetTypeName": "布局列组件",
"meta": {
"LayoutType": "vertical",
"Align": "default",
"ItemSpace": "5"
},
"children": [
{
"id": "b2c3d4e5-0003-4a2b-8c3d-1234567890ab",
"uid": "c77d3e7d-4f00-430d-9aa3-db92d08f01fe",
"dragType": "Widget",
"originalType": "Widget",
"widgetType": "Divider",
"widgetTypeName": "分割线",
"meta": {
"Title": "基本信息",
"Orientation": "center",
"OrientationMargin": "12"
},
"children": []
}
]
}
]
}