mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 13:38:56 +08:00
14 KiB
14 KiB
title | description | type | group | menuName | icon | order |
---|---|---|---|---|---|---|
AnchorNav 锚点导航 | 0 | ⚙ 组件 | AnchorNav | 68 |
锚点导航容器组件。
基本用法
{
"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
成员即可。
水平导航
{
"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",
"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": "工作信息",
"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 | 区域 内容区 | |
links[x].className | string |
"bg-white b-l b-r b-b wrapper-md" |
区域成员 样式 |