2020-07-28 10:03:53 +08:00
|
|
|
---
|
|
|
|
|
title: Nav 导航
|
2020-07-29 16:20:21 +08:00
|
|
|
description:
|
2020-07-28 10:03:53 +08:00
|
|
|
type: 0
|
|
|
|
|
group: ⚙ 组件
|
|
|
|
|
menuName: Nav
|
2020-07-29 16:20:21 +08:00
|
|
|
icon:
|
2020-07-28 10:03:53 +08:00
|
|
|
order: 58
|
|
|
|
|
---
|
2020-07-29 16:20:21 +08:00
|
|
|
|
2020-07-28 10:03:53 +08:00
|
|
|
用于展示链接导航
|
|
|
|
|
|
|
|
|
|
## 基本用法
|
|
|
|
|
|
|
|
|
|
```schema:height="300" 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",
|
|
|
|
|
"to": "/docs/api"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"label": "Nav 3",
|
|
|
|
|
"to": "/docs/renderers"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 横向摆放
|
|
|
|
|
|
|
|
|
|
```schema:height="300" 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"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 属性表
|
|
|
|
|
|
2020-07-29 16:20:21 +08:00
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ----------------- | -------------------------------- | ------- | -------------------------------------- |
|
|
|
|
|
| type | `string` | `"nav"` | 指定为 Nav 渲染器 |
|
|
|
|
|
| className | `string` | | 外层 Dom 的类名 |
|
|
|
|
|
| stacked | `boolean` | `true` | 设置成 false 可以以 tabs 的形式展示 |
|
|
|
|
|
| links | `Array` | | 链接集合 |
|
|
|
|
|
| links[x].label | `string` | | 名称 |
|
|
|
|
|
| links[x].to | [模板](../concepts/template) | | 链接地址 |
|
|
|
|
|
| links[x].icon | `string` | | 图标 |
|
|
|
|
|
| links[x].active | `boolean` | | 是否高亮 |
|
|
|
|
|
| links[x].activeOn | [表达式](../concepts/expression) | | 是否高亮的条件，留空将自动分析链接地址 |
|
