amis/docs/zh-CN/components/nav.md
吴多益 0ae04ce946
docs:将文档移动 zh-CN 目录下;为以后支持英文版做准备 (#1309)
* docs:将文档移动 zh-CN 目录下;为以后支持英文版做准备

* 整理 autoFill

* 补充下载最新版本的说明 (#1298)

* fix: 修复在新版 Firefox 下 js sdk 报错 (#1300)

* 删掉可能报错的代码 (#1311)

* fix: 修复 css 变量不支持数字问题 (#1302)

* feat:增加 animation-duration,可以控制所有动画时长,也能用于一次性关闭所有动画效果 (#1303)

* feat:增加 animation-duration,可以控制所有动画时长,也能用于一次性关闭所有动画效果

* 补充文档

* Pageleave (#1310)

* form 添加页面离开提示功能

* 补充文档

Co-authored-by: 2betop <2betop.cn@gmail.com>
Co-authored-by: liaoxuezhi <liaoxuezhi@baidu.com>
2021-01-04 16:59:32 +08:00

3.3 KiB
Executable File

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": "fa fa-user",
            "active": true
        },
        {
            "label": "Nav 2",
            "to": "/docs/api"
        },
        {
            "label": "Nav 3",
            "to": "/docs/renderers"
        }
    ]
}

配置多层级

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

属性表

属性名 类型 默认值 说明
type string "nav" 指定为 Nav 渲染器
className string 外层 Dom 的类名
stacked boolean true 设置成 false 可以以 tabs 的形式展示
links Array 链接集合
links[x].label string 名称
links[x].to 模板 链接地址
links[x].icon string 图标
links[x].children Array<link> 子链接
links[x].unfolded boolean 初始是否展开
links[x].active boolean 是否高亮
links[x].activeOn 表达式 是否高亮的条件,留空将自动分析链接地址