{
  "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": []
  }
}