mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-16 01:40:53 +08:00
4473fcab3b
* feat：nav组件支持跨层级拖拽 * chore：优化nav组件角标配置和拖拽逻辑 * feat：badge组件level属性支持变量 * chore：优化nav组件拖拽逻辑 Co-authored-by: Qin,Haoyan <qinhaoyan@baidu.com>
226 lines
7.4 KiB
Markdown
Executable File
226 lines
7.4 KiB
Markdown
Executable File
---
|
||
title: Nav 导航
|
||
description:
|
||
type: 0
|
||
group: ⚙ 组件
|
||
menuName: Nav
|
||
icon:
|
||
order: 58
|
||
---
|
||
|
||
用于展示链接导航
|
||
|
||
## 基本用法
|
||
|
||
```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"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 动态导航
|
||
|
||
通过配置 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": "删除"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 属性表
|
||
|
||
| 属性名 | 类型 | 默认值 | 说明 |
|
||
| ----------------- | ---------------------------------------- | -------- | ---------------------------------------------------------------- |
|
||
| type | `string` | `"nav"` | 指定为 Nav 渲染器 |
|
||
| className | `string` | | 外层 Dom 的类名 |
|
||
| stacked | `boolean` | `true` | 设置成 false 可以以 tabs 的形式展示 |
|
||
| source | `string` 或 [API](../../docs/types/api) | | 可以通过变量或 API 接口动态创建导航 |
|
||
| deferApi | [API](../../docs/types/api) | | 用来延时加载选项详情的接口，可以不配置，不配置公用 source 接口。 |
|
||
| itemActions | [SchemaNode](../../docs/types/schemanode) | | 更多操作相关配置 |
|
||
| draggable | `boolean` | | 是否支持拖拽排序 |
|
||
| dragOnSameLevel | `boolean` | | 仅允许同层级内拖拽 |
|
||
| saveOrderApi | `string` 或 [API](../../docs/types/api) | |保存排序的 api |
|
||
| itemBadge | [BadgeSchema](../../components/badge) | | 角标 |
|
||
| links | `Array` | | 链接集合 |
|
||
| links[x].label | `string` | | 名称 |
|
||
| links[x].to | [模板](../../docs/concepts/template) | | 链接地址 |
|
||
| links[x].target | `string` | 链接关系 | |
|
||
| links[x].icon | `string` | | 图标 |
|
||
| links[x].children | `Array<link>` | | 子链接 |
|
||
| links[x].unfolded | `boolean` | | 初始是否展开 |
|
||
| links[x].active | `boolean` | | 是否高亮 |
|
||
| links[x].activeOn | [表达式](../../docs/concepts/expression) | | 是否高亮的条件，留空将自动分析链接地址 |
|
||
| links[x].defer | `boolean` | | 标记是否为懒加载项 |
|
||
| links[x].deferApi | [API](../../docs/types/api) | | 可以不配置，如果配置优先级更高 |
|