mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-06 05:49:32 +08:00
168a3635ef
* feat:dropDownButton新增隐藏下拉图标属性hideCaret;nav组件新增角标、更多操作配置、支持图片拽排序 * feat:dropDownButton新增隐藏下拉图标属性hideCaret;badge组件支持横幅类型;nav组件新增角标配置、更多操作配置、拖拽排序 * chore:优化nav角标相关配置 * fix:修复badge组件ribbon高度遮挡问题 Co-authored-by: Qin,Haoyan <qinhaoyan@baidu.com>
7.2 KiB
Executable File
7.2 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": "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 | string 或 API |
可以通过变量或 API 接口动态创建导航 | |
deferApi | API | 用来延时加载选项详情的接口,可以不配置,不配置公用 source 接口。 | |
itemActions | SchemaNode | 更多操作相关配置 | |
draggable | boolean |
是否支持拖拽排序 | |
saveOrderApi | string 或 API |
保存排序的 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 | 可以不配置,如果配置优先级更高 |