mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-02 12:08:13 +08:00
414 lines
14 KiB
Markdown
414 lines
14 KiB
Markdown
---
|
||
title: AnchorNav 锚点导航
|
||
description:
|
||
type: 0
|
||
group: ⚙ 组件
|
||
menuName: AnchorNav
|
||
icon:
|
||
order: 68
|
||
---
|
||
|
||
锚点导航容器组件。
|
||
|
||
## 基本用法
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "anchor-nav",
|
||
"links": [
|
||
{
|
||
"title": "基本信息",
|
||
"body": [
|
||
{
|
||
"type": "form",
|
||
"title": "基本信息",
|
||
"body": [
|
||
{
|
||
"type": "input-text",
|
||
"name": "name",
|
||
"label": "姓名："
|
||
},
|
||
{
|
||
"name": "email",
|
||
"type": "input-email",
|
||
"label": "邮箱："
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"title": "工作信息",
|
||
"body": [
|
||
{
|
||
"type": "form",
|
||
"title": "工作信息",
|
||
"body": [
|
||
{
|
||
"type": "input-text",
|
||
"name": "cname",
|
||
"label": "公司名称："
|
||
},
|
||
{
|
||
"name": "caddress",
|
||
"type": "input-text",
|
||
"label": "公司地址："
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"title": "兴趣爱好",
|
||
"body": [
|
||
{
|
||
"type": "form",
|
||
"title": "兴趣爱好",
|
||
"body": [
|
||
{
|
||
"type": "input-text",
|
||
"name": "interest1",
|
||
"label": "兴趣爱好1："
|
||
},
|
||
{
|
||
"name": "interest2",
|
||
"type": "input-text",
|
||
"label": "兴趣爱好2："
|
||
},
|
||
{
|
||
"name": "interest3",
|
||
"type": "input-text",
|
||
"label": "兴趣爱好3："
|
||
},
|
||
{
|
||
"name": "interest4",
|
||
"type": "input-text",
|
||
"label": "兴趣爱好4："
|
||
},
|
||
{
|
||
"name": "interest5",
|
||
"type": "input-text",
|
||
"label": "兴趣爱好5："
|
||
},
|
||
{
|
||
"name": "interest6",
|
||
"type": "input-text",
|
||
"label": "兴趣爱好6："
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
默认想要显示多少锚点导航配置多少个 `links` 成员即可。
|
||
|
||
## 水平导航
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "anchor-nav",
|
||
"direction": "horizontal",
|
||
"links": [
|
||
{
|
||
"title": "基本信息",
|
||
"body": [
|
||
{
|
||
"type": "form",
|
||
"title": "基本信息",
|
||
"body": [
|
||
{
|
||
"type": "input-text",
|
||
"name": "name",
|
||
"label": "姓名："
|
||
},
|
||
{
|
||
"name": "email",
|
||
"type": "input-email",
|
||
"label": "邮箱："
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"title": "工作信息",
|
||
"body": [
|
||
{
|
||
"type": "form",
|
||
"title": "工作信息",
|
||
"body": [
|
||
{
|
||
"type": "input-text",
|
||
"name": "cname",
|
||
"label": "公司名称："
|
||
},
|
||
{
|
||
"name": "caddress",
|
||
"type": "input-text",
|
||
"label": "公司地址："
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"title": "兴趣爱好",
|
||
"body": [
|
||
{
|
||
"type": "form",
|
||
"title": "兴趣爱好",
|
||
"body": [
|
||
{
|
||
"type": "input-text",
|
||
"name": "interest1",
|
||
"label": "兴趣爱好1："
|
||
},
|
||
{
|
||
"name": "interest2",
|
||
"type": "input-text",
|
||
"label": "兴趣爱好2："
|
||
},
|
||
{
|
||
"name": "interest3",
|
||
"type": "input-text",
|
||
"label": "兴趣爱好3："
|
||
},
|
||
{
|
||
"name": "interest4",
|
||
"type": "input-text",
|
||
"label": "兴趣爱好4："
|
||
},
|
||
{
|
||
"name": "interest5",
|
||
"type": "input-text",
|
||
"label": "兴趣爱好5："
|
||
},
|
||
{
|
||
"name": "interest6",
|
||
"type": "input-text",
|
||
"label": "兴趣爱好6："
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 默认定位到某个区域
|
||
|
||
主要配置`active`属性来实现该效果，共有下面两种方法：
|
||
|
||
#### 配置 href 值
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "anchor-nav",
|
||
"active": "work",
|
||
"links": [
|
||
{
|
||
"title": "基本信息",
|
||
"href": "base",
|
||
"body": [
|
||
{
|
||
"type": "form",
|
||
"title": "基本信息",
|
||
"body": [
|
||
{
|
||
"type": "input-text",
|
||
"name": "name",
|
||
"label": "姓名："
|
||
},
|
||
{
|
||
"name": "email",
|
||
"type": "input-email",
|
||
"label": "邮箱："
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"title": "工作信息",
|
||
"href": "work",
|
||
"body": [
|
||
{
|
||
"type": "form",
|
||
"title": "工作信息",
|
||
"body": [
|
||
{
|
||
"type": "input-text",
|
||
"name": "cname",
|
||
"label": "公司名称："
|
||
},
|
||
{
|
||
"name": "caddress",
|
||
"type": "input-text",
|
||
"label": "公司地址："
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"title": "兴趣爱好",
|
||
"href": "interest",
|
||
"body": [
|
||
{
|
||
"type": "form",
|
||
"title": "兴趣爱好",
|
||
"body": [
|
||
{
|
||
"type": "input-text",
|
||
"name": "interest1",
|
||
"label": "兴趣爱好1："
|
||
},
|
||
{
|
||
"name": "interest2",
|
||
"type": "input-text",
|
||
"label": "兴趣爱好2："
|
||
},
|
||
{
|
||
"name": "interest3",
|
||
"type": "input-text",
|
||
"label": "兴趣爱好3："
|
||
},
|
||
{
|
||
"name": "interest4",
|
||
"type": "input-text",
|
||
"label": "兴趣爱好4："
|
||
},
|
||
{
|
||
"name": "interest5",
|
||
"type": "input-text",
|
||
"label": "兴趣爱好5："
|
||
},
|
||
{
|
||
"name": "interest6",
|
||
"type": "input-text",
|
||
"label": "兴趣爱好6："
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
#### 配置索引值
|
||
|
||
单个`link`上不要配置`href`属性，配置需要展示的`link`索引值，`0`代表第一个。
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "anchor-nav",
|
||
"active": 1,
|
||
"links": [
|
||
{
|
||
"title": "基本信息",
|
||
"body": [
|
||
{
|
||
"type": "form",
|
||
"title": "基本信息",
|
||
"body": [
|
||
{
|
||
"type": "input-text",
|
||
"name": "name",
|
||
"label": "姓名："
|
||
},
|
||
{
|
||
"name": "email",
|
||
"type": "input-email",
|
||
"label": "邮箱："
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"title": "工作信息",
|
||
"body": [
|
||
{
|
||
"type": "form",
|
||
"title": "工作信息",
|
||
"body": [
|
||
{
|
||
"type": "input-text",
|
||
"name": "cname",
|
||
"label": "公司名称："
|
||
},
|
||
{
|
||
"name": "caddress",
|
||
"type": "input-text",
|
||
"label": "公司地址："
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"title": "兴趣爱好",
|
||
"body": [
|
||
{
|
||
"type": "form",
|
||
"title": "兴趣爱好",
|
||
"body": [
|
||
{
|
||
"type": "input-text",
|
||
"name": "interest1",
|
||
"label": "兴趣爱好1："
|
||
},
|
||
{
|
||
"name": "interest2",
|
||
"type": "input-text",
|
||
"label": "兴趣爱好2："
|
||
},
|
||
{
|
||
"name": "interest3",
|
||
"type": "input-text",
|
||
"label": "兴趣爱好3："
|
||
},
|
||
{
|
||
"name": "interest4",
|
||
"type": "input-text",
|
||
"label": "兴趣爱好4："
|
||
},
|
||
{
|
||
"name": "interest5",
|
||
"type": "input-text",
|
||
"label": "兴趣爱好5："
|
||
},
|
||
{
|
||
"name": "interest6",
|
||
"type": "input-text",
|
||
"label": "兴趣爱好6："
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 属性表
|
||
|
||
| 属性名 | 类型 | 默认值 | 说明 |
|
||
| ------------------ | --------------------------------- | ----------------------------------- | -------------------------------------------------------------------------- |
|
||
| type | `string` | `"anchor-nav"` | 指定为 AnchorNav 渲染器 |
|
||
| className | `string` | | 外层 Dom 的类名 |
|
||
| linkClassName | `string` | | 导航 Dom 的类名 |
|
||
| sectionClassName | `string` | | 锚点区域 Dom 的类名 |
|
||
| links | `Array` | | links 内容 |
|
||
| direction | `string` | `"vertical"` | 可以配置导航水平展示还是垂直展示。对应的配置项分别是：vertical、horizontal |
|
||
| active | `string` | | 需要定位的区域 |
|
||
| links[x].title | `string` | | 区域 标题 |
|
||
| links[x].href | `string` | | 区域 标识 |
|
||
| links[x].body | [SchemaNode](../types/schemanode) | | 区域 内容区 |
|
||
| links[x].className | `string` | `"bg-white b-l b-r b-b wrapper-md"` | 区域成员 样式 |
|