Nav 导航

用于展示链接导航

基本用法

```schema: scope=”body” { “type”: “nav”, “stacked”: true, “className”: “w-md”, “itemBadge”: { “mode”: “ribbon”, “text”: “${customText}”, “position”: “top-left”, “visibleOn”: “this.customText”, “level”: “${customLevel}” }, “links”: [ { “label”: “Nav 1”, “to”: “/docs/index”, “icon”: “https://suda.cdn.bcebos.com/images%2F2021-01%2Fdiamond.svg“, “active”: true }, { “label”: “Nav 2”, “to”: “/docs/api”, “customText”: “HOT”, “customLevel”: “danger” }, { “label”: “Nav 3”, “to”: “/docs/renderers”, “customText”: “SUC”, “customLevel”: “success” }, { “label”: “外部地址”, “to”: “http://www.baidu.com/“, “target”: “_blank” } ] }

## 配置多层级
```schema: scope="body"
{
    "type": "nav",
    "stacked": true,
    "className": "w-md",
    "links": [
        {
            "label": "Nav 1",
            "to": "/docs/index",
            "icon": "fa fa-user",
            "active": true
        },
        {
            "label": "Nav 2",
            "unfolded": true,
            "children": [
                {
                    "label": "Nav 2-1",
                    "children": [
                        {
                            "label": "Nav 2-1-1",
                            "to": "/docs/api-2-1-1"
                        }
                    ]
                },
                {
                    "label": "Nav 2-2",
                    "to": "/docs/api-2-2"
                }
            ]
        },
        {
            "label": "Nav 3",
            "to": "/docs/renderers"
        }
    ]
}

横向摆放

```schema: scope=”body” { “type”: “nav”, “stacked”: false, “links”: [ { “label”: “Nav 1”, “to”: “/docs/index”, “icon”: “fa fa-user” }, { “label”: “Nav 2”, “to”: “/docs/api” }, { “label”: “Nav 3”, “to”: “/docs/renderers” } ] }

### 响应式收纳
横向（`"stack": false`）模式下配置`overflow`，实现导航响应式收纳。
```schema: scope="body"
{
    "type": "nav",
    "stacked": false,
    "overflow": {
        "enable": true
    },
    "links": [
        {
            "label": "Nav 1",
            "to": "?to=nav1",
        },
        {
            "label": "Nav 2",
            "to": "?to=nav1"
        },
        {
            "label": "Nav 3",
            "to": "?to=nav3"
        },
        {
            "label": "Nav 4",
            "to": "?to=nav4"
        },
        {
            "label": "Nav 5",
            "to": "?to=nav5"
        },
        {
            "label": "Nav 6",
            "to": "?to=nav6"
        },
        {
            "label": "Nav 7",
            "to": "?to=nav7"
        },
         {
            "label": "Nav 8",
            "to": "?to=nav8"
        }
    ]
}

设置maxVisibleCount可以自定义强制展示的导航数量，不设置则自动处理。设置overflowIndicator自定义菜单按钮的图标。 设置overflowLabel自定义菜单按钮文本。

```schema: scope=”body” { “type”: “nav”, “stacked”: false, “overflow”: { “enable”: true, “overflowClassName”: “nav-overflow-btn”, “overflowPopoverClassName”: “nav-overflow-popover”, “overflowIndicator”: “fas fa-angle-double-down”, “overflowLabel”: “更多”, “maxVisibleCount”: 5, }, “links”: [ { “label”: “Nav 1”, “to”: “?to=nav1”, }, { “label”: “Nav 2”, “to”: “?to=nav1” }, { “label”: “Nav 3”, “to”: “?to=nav3” }, { “label”: “Nav 4”, “to”: “?to=nav4” }, { “label”: “Nav 5”, “to”: “?to=nav5” }, { “label”: “Nav 6”, “to”: “?to=nav6” }, { “label”: “Nav 7”, “to”: “?to=nav7” }, { “label”: “Nav 8 Nav 8 Nav 8 Nav 8 Nav 8”, “to”: “?to=nav8” } ] }

## 动态导航
通过配置 source 来实现动态生成导航，source 可以是 api 地址或者变量，比如
```schema
{
    "type": "page",
    "data": {
        "nav": [
            {
                "label": "Nav 1",
                "to": "/docs/index",
                "icon": "fa fa-user"
            },
            {
                "label": "Nav 2",
                "to": "/docs/api"
            },
            {
                "label": "Nav 3",
                "to": "/docs/renderers"
            }
        ]
    },
    "body": {
        "type": "nav",
        "stacked": true,
        "source": "${nav}"
    }
}

懒加载

可以一次只加载部分层级，更深层次的选项可以标记为 defer 为 true，这样只有点开的时才会加载。

```schema: scope=”body” { “type”: “nav”, “stacked”: true, “source”: “/api/options/nav?parentId=${value}” }

## 更多操作
```schema: scope="body"
{
    "type": "nav",
    "stacked": true,
    "className": "w-md",
    "draggable": true,
    "saveOrderApi": "/api/options/nav",
    "source": "/api/options/nav?parentId=${value}",
    "itemActions": [
        {
            "type": "icon",
            "icon": "cloud",
            "visibleOn": "this.to === '?cat=1'"
        },
        {
            "type": "dropdown-button",
            "level": "link",
            "icon": "fa fa-ellipsis-h",
            "hideCaret": true,
            "buttons": [
                {
                    "type": "button",
                    "label": "编辑",
                },
                {
                    "type": "button",
                    "label": "删除"
                }
            ]
        }
    ]
}

属性表