标签
标签用于在页面中展示一段文本标题,可调整字号、颜色与偏移,常用于区块小标题或说明文字。
概述
将「标签」拖入画布后,在属性抽屉中配置文本内容、垂直/水平偏移、字号与颜色。文本在用户态支持系统环境变量占位符(编辑态显示原文)。
配置项
| 配置项 | 说明 |
|---|---|
| 标题 | 标签文本内容 |
| 垂直偏移 | 文本上下的内边距(px),取值 0 ~ 30,默认 5 |
| 水平偏移 | 文本的左外边距(px),取值 0 ~ 1000,默认 0 |
| 字号 | 文本字号(px),取值 10 ~ 50,默认 20 |
| 颜色 | 文本颜色,取十六进制色值 |
使用建议
- 用作区块小标题时,字号建议大于正文(如 20 ~ 24)。
- 需要强调时,可设置与主题色一致的颜色。
下一步
属性明细
以下内容面向技术实现与 AI 检索。所有 meta 键值均以字符串形式存储。
组件属性(meta)
| 属性名 | 类型 | 含义 | 取值/存储值 |
|---|---|---|---|
Title | string | 标签文本 | 文本,用户态支持系统环境变量占位符,默认 标签 |
OffsetVertical | string(number) | 上下内边距(px) | 0 ~ 30,默认 5 |
OffsetLeft | string(number) | 左外边距(px) | 0 ~ 1000,默认 0 |
FontSize | string(number) | 字号(px) | 10 ~ 50,默认 20 |
Color | string | 文本颜色 | 十六进制色值,如 #1677ff,默认空 |
GetSidebarItemMeta() 默认仅写入 Title(默认文案),其余键在用户配置后写入。uid 固定为 c98fba91-6a96-4f72-bebf-c1d256c785d4。
存储示例
组件通常位于列(Column)内,以下为嵌套在行(Row)→ 列(Column)中的完整存储结构:
{
"id": "c3d4e5f6-0001-4a2b-8c3d-1234567890ab",
"uid": "5a0f3c1e-9b8d-4f6a-9c2e-7d1b4a8e6f3d",
"dragType": "Row",
"originalType": "Row",
"widgetType": "Row",
"widgetTypeName": "基础容器",
"meta": {
"ColumnSpace": "5"
},
"children": [
{
"id": "c3d4e5f6-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": "c3d4e5f6-0003-4a2b-8c3d-1234567890ab",
"uid": "c98fba91-6a96-4f72-bebf-c1d256c785d4",
"dragType": "Widget",
"originalType": "Widget",
"widgetType": "Label",
"widgetTypeName": "标签",
"meta": {
"Title": "基本信息",
"OffsetVertical": "5",
"OffsetLeft": "0",
"FontSize": "20",
"Color": "#1677ff"
},
"children": []
}
]
}
]
}