amis/docs/components/nav.md

76 lines
2.2 KiB
Markdown
Raw Normal View History

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) | | 是否高亮的条件,留空将自动分析链接地址 |