amis2/docs/zh-CN/components/nav.md
qinhaoyan 168a3635ef
feat:dropDownButton新增隐藏下拉图标属性hideCaret;badge组件支持横幅类型;nav组件新增角标配置、更多操作配置、拖拽排序 (#2800)
* feat:dropDownButton新增隐藏下拉图标属性hideCaret;nav组件新增角标、更多操作配置、支持图片拽排序

* feat:dropDownButton新增隐藏下拉图标属性hideCaret;badge组件支持横幅类型;nav组件新增角标配置、更多操作配置、拖拽排序

* chore:优化nav角标相关配置

* fix:修复badge组件ribbon高度遮挡问题

Co-authored-by: Qin,Haoyan <qinhaoyan@baidu.com>
2021-11-01 10:14:25 +08:00

7.2 KiB
Executable File
Raw Blame History

title description type group menuName icon order
Nav 导航 0 ⚙ 组件 Nav 58

用于展示链接导航

基本用法

{
    "type": "nav",
    "stacked": true,
    "className": "w-md",
    "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",
            "badge": {
                "mode": "ribbon",
                "text": "HOT",
                "position": "top-left"
            }
        },
        {
            "label": "Nav 3",
            "to": "/docs/renderers"
        },
        {
            "label": "外部地址",
            "to": "http://www.baidu.com/",
            "target": "_blank"
        }
    ]
}

配置多层级

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

横向摆放

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

动态导航

通过配置 source 来实现动态生成导航source 可以是 api 地址或者变量,比如

{
    "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这样只有点开的时才会加载。

{
    "type": "nav",
    "stacked": true,
    "source": "/api/options/nav?parentId=${value}"
}

更多操作

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

属性表

属性名 类型 默认值 说明
type string "nav" 指定为 Nav 渲染器
className string 外层 Dom 的类名
stacked boolean true 设置成 false 可以以 tabs 的形式展示
source stringAPI 可以通过变量或 API 接口动态创建导航
deferApi API 用来延时加载选项详情的接口,可以不配置,不配置公用 source 接口。
itemActions SchemaNode 更多操作相关配置
draggable boolean 是否支持拖拽排序
saveOrderApi stringAPI 保存排序的 api
badge BadgeSchema 角标
links Array 链接集合
links[x].label string 名称
links[x].badge BadgeSchema 角标,会覆盖全局角标配置
links[x].to 模板 链接地址
links[x].target string 链接关系
links[x].icon string 图标
links[x].children Array<link> 子链接
links[x].unfolded boolean 初始是否展开
links[x].active boolean 是否高亮
links[x].activeOn 表达式 是否高亮的条件,留空将自动分析链接地址
links[x].defer boolean 标记是否为懒加载项
links[x].deferApi API 可以不配置,如果配置优先级更高