194 lines
4.8 KiB
JSON
194 lines
4.8 KiB
JSON
{
|
||
"order": 18,
|
||
"key": "nav",
|
||
"type": "nav",
|
||
"name": "选项导航",
|
||
"description": "一组可点击的选项（页签、模型选择器），点击某项把它的 value 写进变量，值等于当前变量的项高亮；配合组件的显示条件做整页切换，配合筛选做钻取",
|
||
"tags": [
|
||
"info",
|
||
"导航",
|
||
"页签",
|
||
"切换",
|
||
"选择器",
|
||
"tabs",
|
||
"nav"
|
||
],
|
||
"renderer": "nav",
|
||
"group": "info",
|
||
"icon": "solar:list-bold",
|
||
"usage_notes": [
|
||
"props.var 写变量 ID，变量先在画布 variables 里声明；点击选项写变量不需要配事件",
|
||
"items 每项 {label, value}，value 不能为空且不重复；可以写 $query，例如 SELECT DISTINCT model AS label, model AS value FROM t ORDER BY 1",
|
||
"变量的默认值取 items 里的某个 value，打开大屏时那一项高亮"
|
||
],
|
||
"field_groups": [
|
||
"node-base",
|
||
{
|
||
"key": "nav-content",
|
||
"label": "选项",
|
||
"description": "写哪个变量、有哪些选项、横排还是竖排",
|
||
"fields": [
|
||
{
|
||
"path": "props.var",
|
||
"label": "变量",
|
||
"description": "点击选项时写入的变量 ID，值等于该变量的选项高亮",
|
||
"value_type": "string",
|
||
"aliases": [
|
||
"绑定变量",
|
||
"变量名"
|
||
]
|
||
},
|
||
{
|
||
"path": "props.items",
|
||
"label": "选项",
|
||
"description": "选项列表，每项 {label: 显示文字, value: 写入变量的值}",
|
||
"value_type": "array",
|
||
"item_type": "object",
|
||
"panel": false,
|
||
"example": "label",
|
||
"identifies": true,
|
||
"aliases": [
|
||
"选项列表",
|
||
"页签",
|
||
"标签页",
|
||
"菜单项"
|
||
]
|
||
},
|
||
{
|
||
"path": "props.direction",
|
||
"label": "排列方向",
|
||
"description": "选项横排还是竖排",
|
||
"value_type": "enum",
|
||
"options": [
|
||
{
|
||
"value": "horizontal",
|
||
"label": "横排"
|
||
},
|
||
{
|
||
"value": "vertical",
|
||
"label": "竖排"
|
||
}
|
||
],
|
||
"aliases": [
|
||
"方向",
|
||
"横向",
|
||
"纵向"
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"key": "nav-style",
|
||
"label": "样式",
|
||
"description": "选项文字的字号、颜色、对齐和选中项的颜色",
|
||
"fields": [
|
||
{
|
||
"path": "style.fontSize",
|
||
"label": "字号",
|
||
"description": "选项文字的大小",
|
||
"value_type": "number",
|
||
"minimum": 8,
|
||
"maximum": 100,
|
||
"unit": "px",
|
||
"aliases": [
|
||
"字体大小",
|
||
"文字大小"
|
||
]
|
||
},
|
||
{
|
||
"path": "style.color",
|
||
"label": "文字颜色",
|
||
"description": "未选中选项的文字颜色",
|
||
"value_type": "color",
|
||
"themed": true,
|
||
"aliases": [
|
||
"字体颜色",
|
||
"颜色"
|
||
]
|
||
},
|
||
{
|
||
"path": "style.activeColor",
|
||
"label": "选中文字色",
|
||
"description": "选中选项的文字颜色",
|
||
"value_type": "color",
|
||
"themed": true,
|
||
"aliases": [
|
||
"高亮颜色",
|
||
"选中颜色"
|
||
]
|
||
},
|
||
{
|
||
"path": "style.activeBackground",
|
||
"label": "选中背景色",
|
||
"description": "选中选项的背景颜色",
|
||
"value_type": "color",
|
||
"themed": true,
|
||
"aliases": [
|
||
"高亮背景",
|
||
"选中底色"
|
||
]
|
||
},
|
||
{
|
||
"path": "style.textAlign",
|
||
"label": "对齐",
|
||
"description": "选项在组件内的水平位置",
|
||
"value_type": "enum",
|
||
"options": [
|
||
{
|
||
"value": "left",
|
||
"label": "左对齐"
|
||
},
|
||
{
|
||
"value": "center",
|
||
"label": "居中"
|
||
},
|
||
{
|
||
"value": "right",
|
||
"label": "右对齐"
|
||
}
|
||
],
|
||
"aliases": [
|
||
"水平对齐"
|
||
]
|
||
}
|
||
]
|
||
}
|
||
],
|
||
"event_groups": [
|
||
"dom-events"
|
||
],
|
||
"schema": {
|
||
"type": "nav",
|
||
"name": "选项导航",
|
||
"layout": {
|
||
"x": 0,
|
||
"y": 0,
|
||
"width": 480,
|
||
"height": 48
|
||
},
|
||
"props": {
|
||
"var": "",
|
||
"items": [
|
||
{
|
||
"label": "选项一",
|
||
"value": "a"
|
||
},
|
||
{
|
||
"label": "选项二",
|
||
"value": "b"
|
||
},
|
||
{
|
||
"label": "选项三",
|
||
"value": "c"
|
||
}
|
||
],
|
||
"direction": "horizontal"
|
||
},
|
||
"style": {
|
||
"fontSize": 16,
|
||
"textAlign": "center"
|
||
},
|
||
"events": []
|
||
}
|
||
}
|