test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 20:18:03 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity
2b61cc85ca
amis2/docs/zh-CN/components/nav.md

336 lines
13 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 中的高度设置；修复 tinymce 弹窗可能被遮挡问题 (#1336) * 文档优化 * 文档细节调整，删除示例的 height 设置，使用自动撑开 * sdk 使用完整例子，因为新版没发布 * 修复官网语言不正确问题 * 增加 icon 调整颜色及大小的例子 * 修复文字错误 * 补充 each 的文档 * 修复 zh-CN 大写问题
2021-01-07 23:35:03 +08:00
```schema: scope="body"
文档加上去了
2020-07-28 10:03:53 +08:00
{
"type": "nav",
"stacked": true,
"className": "w-md",
feat：nav组件支持跨层级拖拽 (#2844) * feat：nav组件支持跨层级拖拽 * chore：优化nav组件角标配置和拖拽逻辑 * feat：badge组件level属性支持变量 * chore：优化nav组件拖拽逻辑 Co-authored-by: Qin,Haoyan <qinhaoyan@baidu.com>
2021-11-05 11:57:28 +08:00
"itemBadge": {
"mode": "ribbon",
"text": "${customText}",
"position": "top-left",
"visibleOn": "this.customText",
"level": "${customLevel}"
},
文档加上去了
2020-07-28 10:03:53 +08:00
"links": [
{
"label": "Nav 1",
"to": "/docs/index",
icon 换成 bos 地址避免路径问题 (#1474)
2021-01-28 17:04:31 +08:00
"icon": "https://suda.cdn.bcebos.com/images%2F2021-01%2Fdiamond.svg",
文档加上去了
2020-07-28 10:03:53 +08:00
"active": true
},
{
"label": "Nav 2",
feat：dropDownButton新增隐藏下拉图标属性hideCaret；badge组件支持横幅类型；nav组件新增角标配置、更多操作配置、拖拽排序 (#2800) * feat：dropDownButton新增隐藏下拉图标属性hideCaret；nav组件新增角标、更多操作配置、支持图片拽排序 * feat：dropDownButton新增隐藏下拉图标属性hideCaret；badge组件支持横幅类型；nav组件新增角标配置、更多操作配置、拖拽排序 * chore：优化nav角标相关配置 * fix：修复badge组件ribbon高度遮挡问题 Co-authored-by: Qin,Haoyan <qinhaoyan@baidu.com>
2021-11-01 10:14:25 +08:00
"to": "/docs/api",
feat：nav组件支持跨层级拖拽 (#2844) * feat：nav组件支持跨层级拖拽 * chore：优化nav组件角标配置和拖拽逻辑 * feat：badge组件level属性支持变量 * chore：优化nav组件拖拽逻辑 Co-authored-by: Qin,Haoyan <qinhaoyan@baidu.com>
2021-11-05 11:57:28 +08:00
"customText": "HOT",
"customLevel": "danger"
文档加上去了
2020-07-28 10:03:53 +08:00
},
{
"label": "Nav 3",
feat：nav组件支持跨层级拖拽 (#2844) * feat：nav组件支持跨层级拖拽 * chore：优化nav组件角标配置和拖拽逻辑 * feat：badge组件level属性支持变量 * chore：优化nav组件拖拽逻辑 Co-authored-by: Qin,Haoyan <qinhaoyan@baidu.com>
2021-11-05 11:57:28 +08:00
"to": "/docs/renderers",
"customText": "SUC",
"customLevel": "success"
feat: nav 的连接支持设置 target (#2177)
2021-07-01 00:45:13 +08:00
},
{
"label": "外部地址",
"to": "http://www.baidu.com/",
"target": "_blank"
文档加上去了
2020-07-28 10:03:53 +08:00
}
]
}
```
fix：修复 nav 多层嵌套的展现问题；只有 publish-sdk 和 gh-pages 下才编译 ie11，避免 dev 修改 sc… (#1292) * fix：修复 nav 多层嵌套的展现问题；只有 publish-sdk 和 gh-pages 下才编译 ie11，避免 dev 修改 scss 等太久 * publish-sdk 中不需要转换 ie11
2020-12-30 20:15:06 +08:00
## 配置多层级
文档文字小调整；统一删掉 schema 中的高度设置；修复 tinymce 弹窗可能被遮挡问题 (#1336) * 文档优化 * 文档细节调整，删除示例的 height 设置，使用自动撑开 * sdk 使用完整例子，因为新版没发布 * 修复官网语言不正确问题 * 增加 icon 调整颜色及大小的例子 * 修复文字错误 * 补充 each 的文档 * 修复 zh-CN 大写问题
2021-01-07 23:35:03 +08:00
```schema: scope="body"
fix：修复 nav 多层嵌套的展现问题；只有 publish-sdk 和 gh-pages 下才编译 ie11，避免 dev 修改 sc… (#1292) * fix：修复 nav 多层嵌套的展现问题；只有 publish-sdk 和 gh-pages 下才编译 ie11，避免 dev 修改 scss 等太久 * publish-sdk 中不需要转换 ie11
2020-12-30 20:15:06 +08:00
{
"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"
}
]
}
```
文档加上去了
2020-07-28 10:03:53 +08:00
## 横向摆放
文档文字小调整；统一删掉 schema 中的高度设置；修复 tinymce 弹窗可能被遮挡问题 (#1336) * 文档优化 * 文档细节调整，删除示例的 height 设置，使用自动撑开 * sdk 使用完整例子，因为新版没发布 * 修复官网语言不正确问题 * 增加 icon 调整颜色及大小的例子 * 修复文字错误 * 补充 each 的文档 * 修复 zh-CN 大写问题
2021-01-07 23:35:03 +08:00
```schema: scope="body"
文档加上去了
2020-07-28 10:03:53 +08:00
{
"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"
}
]
}
```
feat: nav水平模式支持响应式收纳 (#3795)
2022-03-17 16:26:51 +08:00
### 响应式收纳
横向（`"stack": false`）模式下配置`overflow`，实现导航响应式收纳。
```schema: scope="body"
{
"type": "nav",
"stacked": false,
"overflow": {
"enable": true
},
"links": [
{
"label": "Nav 1",
"to": "?to=nav1",
},
{
"label": "Nav 2",
"to": "?to=nav1"
},
{
"label": "Nav 3",
"to": "?to=nav3"
},
{
"label": "Nav 4",
"to": "?to=nav4"
},
{
"label": "Nav 5",
"to": "?to=nav5"
},
{
"label": "Nav 6",
"to": "?to=nav6"
},
{
"label": "Nav 7",
"to": "?to=nav7"
},
{
"label": "Nav 8",
"to": "?to=nav8"
}
]
}
```
设置`maxVisibleCount`可以自定义强制展示的导航数量，不设置则自动处理。设置`overflowIndicator`自定义菜单按钮的图标。
设置`overflowLabel`自定义菜单按钮文本。
```schema: scope="body"
{
"type": "nav",
"stacked": false,
"overflow": {
"enable": true,
"overflowClassName": "nav-overflow-btn",
"overflowPopoverClassName": "nav-overflow-popover",
"overflowIndicator": "fas fa-angle-double-down",
"overflowLabel": "更多",
"maxVisibleCount": 5,
},
"links": [
{
"label": "Nav 1",
"to": "?to=nav1",
},
{
"label": "Nav 2",
"to": "?to=nav1"
},
{
"label": "Nav 3",
"to": "?to=nav3"
},
{
"label": "Nav 4",
"to": "?to=nav4"
},
{
"label": "Nav 5",
"to": "?to=nav5"
},
{
"label": "Nav 6",
"to": "?to=nav6"
},
{
"label": "Nav 7",
"to": "?to=nav7"
},
{
"label": "Nav 8 Nav 8 Nav 8 Nav 8 Nav 8",
"to": "?to=nav8"
}
]
}
```
chore: 修复 nav 文档中 cfc 链接地址未替换问题 (#2630)
2021-09-29 20:00:56 +08:00
## 动态导航
通过配置 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}"
}
}
```
Lazyload (#1838) * 优化 pc 样式 * 样式微调 * Nav 支持 lazyreload * 小调整 * 补充文档 * 补充reload 逻辑 * 补充 reload 逻辑 * 改成 cfc 接口 * 多提交了文件 * 还原 example
2021-04-21 00:22:18 +08:00
## 懒加载
可以一次只加载部分层级，更深层次的选项可以标记为 `defer` 为 true，这样只有点开的时才会加载。
```schema: scope="body"
{
"type": "nav",
"stacked": true,
docs: 将 cfc 的 mock 接口放到项目中支持文档离线访问；将大部分图片外联都放入项目中管理 (#2366)
2021-08-09 18:05:01 +08:00
"source": "/api/options/nav?parentId=${value}"
Lazyload (#1838) * 优化 pc 样式 * 样式微调 * Nav 支持 lazyreload * 小调整 * 补充文档 * 补充reload 逻辑 * 补充 reload 逻辑 * 改成 cfc 接口 * 多提交了文件 * 还原 example
2021-04-21 00:22:18 +08:00
}
```
feat：dropDownButton新增隐藏下拉图标属性hideCaret；badge组件支持横幅类型；nav组件新增角标配置、更多操作配置、拖拽排序 (#2800) * feat：dropDownButton新增隐藏下拉图标属性hideCaret；nav组件新增角标、更多操作配置、支持图片拽排序 * feat：dropDownButton新增隐藏下拉图标属性hideCaret；badge组件支持横幅类型；nav组件新增角标配置、更多操作配置、拖拽排序 * chore：优化nav角标相关配置 * fix：修复badge组件ribbon高度遮挡问题 Co-authored-by: Qin,Haoyan <qinhaoyan@baidu.com>
2021-11-01 10:14:25 +08:00
## 更多操作
```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": "删除"
}
]
}
]
}
```
文档加上去了
2020-07-28 10:03:53 +08:00
## 属性表
feat: nav水平模式支持响应式收纳 (#3795)
2022-03-17 16:26:51 +08:00
| 属性名 | 类型 | 默认值 | 说明 |
| --------------------------------- | ----------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------- |
| 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) | | 可以不配置，如果配置优先级更高 |
| overflow | `NavOverflow` | | 响应式收纳配置 |
| overflow.enable | `boolean` | `false` | 是否开启响应式收纳 |
| overflow.overflowLabel | `string \| SchemaObject` | | 菜单触发按钮的文字 |
| overflow.overflowIndicator | `SchemaIcon` | `"fa fa-ellipsis"` | 菜单触发按钮的图标 |
| overflow.maxVisibleCount | `number` | | 开启响应式收纳后导航最大可显示数量，超出此数量的导航将被收纳到下拉菜单中，默认为自动计算 |
| overflow.wrapperComponent | `string` | | 包裹导航的外层标签名，可以使用其他标签渲染 |
| overflow.style | `React.CSSProperties` | | 自定义样式 |
| overflow.overflowClassName | `string` | `""` | 菜单按钮 CSS 类名 |
| overflow.overflowPopoverClassName | `string` | `""` | Popover 浮层 CSS 类名 |
| overflow.overflowListClassName | `string` | `""` | 菜单外层 CSS 类名 |
Reference in New Issue Copy Permalink