amis2/docs/zh-CN/components/anchor-nav.md

---
title: AnchorNav 锚点导航
description:
type: 0
group: ⚙ 组件
menuName: AnchorNav
icon:
order: 68
---

锚点导航容器组件。

## 基本用法

`6.1.0`及以上版本垂直方向支持配置子节点

```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": "工作信息",
            "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` 成员即可。

## 水平导航

```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",
            "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`代表第一个。

```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": "工作信息",
            "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](../types/schemanode) |                                     | 区域 内容区，`6.1.0`及以上版本垂直方向支持配置子节点                       |
| links[x].className | `string`                          | `"bg-white b-l b-r b-b wrapper-md"` | 区域成员 样式                                                              |