mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-01 19:38:16 +08:00
17 KiB
17 KiB
| title | description | type | group | menuName | icon | order |
|---|---|---|---|---|---|---|
| AnchorNav 锚点导航 | 0 | ⚙ 组件 | AnchorNav | 68 |
锚点导航容器组件。
基本用法
6.1.0及以上版本垂直方向支持配置子节点
{
"type": "anchor-nav",
"links": [
{
"title": "基本信息",
"body": [
{
"type": "form",
"title": "基本信息",
"body": [
{
"type": "input-text",
"name": "name",
"label": "姓名："
},
{
"name": "email",
"type": "input-email",
"label": "邮箱："
}
]
}
]
},
{
"title": "工作信息",
"children": [
{
"title": "工作信息-1",
"type": "form",
"body": [
{
"type": "input-text",
"name": "workInfo1-1",
"label": "工作信息1-1："
},
{
"name": "workInfo1-2",
"type": "input-text",
"label": "工作信息1-2"
}
]
}
],
"body": [
{
"type": "form",
"title": "工作信息",
"body": [
{
"type": "input-text",
"name": "cname",
"label": "公司名称："
},
{
"name": "caddress",
"type": "input-text",
"label": "公司地址："
}
]
}
]
},
{
"title": "兴趣爱好",
"children": [
{
"title": "兴趣爱好1-1",
"body": [
{
"type": "form",
"title": "兴趣爱好1-1",
"body": [
{
"type": "input-text",
"name": "interest1-1",
"label": "interest1-1"
},
{
"name": "interest1-2",
"type": "input-text",
"label": "interest1-2"
}
]
}
]
}
],
"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 成员即可。
水平导航
{
"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 值
{
"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",
"children": [
{
"title": "工作信息-1",
"href": "work-1",
"type": "form",
"body": [
{
"type": "input-text",
"name": "workInfo1-1",
"label": "工作信息1-1："
},
{
"name": "workInfo1-2",
"type": "input-text",
"label": "工作信息1-2"
}
]
}
],
"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代表第一个。
{
"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": "工作信息",
"children": [
{
"title": "工作信息-1",
"type": "form",
"body": [
{
"type": "input-text",
"name": "workInfo1-1",
"label": "工作信息1-1："
},
{
"name": "workInfo1-2",
"type": "input-text",
"label": "工作信息1-2"
}
]
}
],
"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 | 区域 内容区，6.1.0及以上版本垂直方向支持配置子节点 |
|
| links[x].className | string |
"bg-white b-l b-r b-b wrapper-md" |
区域成员 样式 |