feat：图表交互
This commit is contained in:
@@ -0,0 +1,193 @@
|
||||
{
|
||||
"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": []
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user