AnchorNav 锚点导航

锚点导航容器组件。

基本用法

```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：” } ] } ] } ] }

  2. 默认想要显示多少锚点导航配置多少个 `links` 成员即可。
  4. ## 水平导航
  6. ```schema: scope="body"
  7. {
  8.     "type": "anchor-nav",
  9.     "direction": "horizontal",
  10.     "links": [
  11.         {
  12.             "title": "基本信息",
  13.             "body": [
  14.                 {
  15.                     "type": "form",
  16.                     "title": "基本信息",
  17.                     "body": [
  18.                         {
  19.                             "type": "input-text",
  20.                             "name": "name",
  21.                             "label": "姓名："
  22.                         },
  23.                         {
  24.                             "name": "email",
  25.                             "type": "input-email",
  26.                             "label": "邮箱："
  27.                         }
  28.                     ]
  29.                 }
  30.             ]
  31.         },
  32.         {
  33.             "title": "工作信息",
  34.             "body": [
  35.                 {
  36.                     "type": "form",
  37.                     "title": "工作信息",
  38.                     "body": [
  39.                         {
  40.                             "type": "input-text",
  41.                             "name": "cname",
  42.                             "label": "公司名称："
  43.                         },
  44.                         {
  45.                             "name": "caddress",
  46.                             "type": "input-text",
  47.                             "label": "公司地址："
  48.                         }
  49.                     ]
  50.                 }
  51.             ]
  52.         },
  53.         {
  54.             "title": "兴趣爱好",
  55.             "body": [
  56.                 {
  57.                     "type": "form",
  58.                     "title": "兴趣爱好",
  59.                     "body": [
  60.                         {
  61.                             "type": "input-text",
  62.                             "name": "interest1",
  63.                             "label": "兴趣爱好1："
  64.                         },
  65.                         {
  66.                             "name": "interest2",
  67.                             "type": "input-text",
  68.                             "label": "兴趣爱好2："
  69.                         },
  70.                         {
  71.                             "name": "interest3",
  72.                             "type": "input-text",
  73.                             "label": "兴趣爱好3："
  74.                         },
  75.                         {
  76.                             "name": "interest4",
  77.                             "type": "input-text",
  78.                             "label": "兴趣爱好4："
  79.                         },
  80.                         {
  81.                             "name": "interest5",
  82.                             "type": "input-text",
  83.                             "label": "兴趣爱好5："
  84.                         },
  85.                         {
  86.                             "name": "interest6",
  87.                             "type": "input-text",
  88.                             "label": "兴趣爱好6："
  89.                         }
  90.                     ]
  91.                 }
  92.             ]
  93.         }
  94.     ]
  95. }

默认定位到某个区域

主要配置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：” } ] } ] } ] }

  2. #### 配置索引值
  4. 单个`link`上不要配置`href`属性，配置需要展示的`link`索引值，`0`代表第一个。
  6. ```schema: scope="body"
  7. {
  8.     "type": "anchor-nav",
  9.     "active": 1,
  10.     "links": [
  11.         {
  12.             "title": "基本信息",
  13.             "body": [
  14.                 {
  15.                     "type": "form",
  16.                     "title": "基本信息",
  17.                     "body": [
  18.                         {
  19.                             "type": "input-text",
  20.                             "name": "name",
  21.                             "label": "姓名："
  22.                         },
  23.                         {
  24.                             "name": "email",
  25.                             "type": "input-email",
  26.                             "label": "邮箱："
  27.                         }
  28.                     ]
  29.                 }
  30.             ]
  31.         },
  32.         {
  33.             "title": "工作信息",
  34.             "body": [
  35.                 {
  36.                     "type": "form",
  37.                     "title": "工作信息",
  38.                     "body": [
  39.                         {
  40.                             "type": "input-text",
  41.                             "name": "cname",
  42.                             "label": "公司名称："
  43.                         },
  44.                         {
  45.                             "name": "caddress",
  46.                             "type": "input-text",
  47.                             "label": "公司地址："
  48.                         }
  49.                     ]
  50.                 }
  51.             ]
  52.         },
  53.         {
  54.             "title": "兴趣爱好",
  55.             "body": [
  56.                 {
  57.                     "type": "form",
  58.                     "title": "兴趣爱好",
  59.                     "body": [
  60.                         {
  61.                             "type": "input-text",
  62.                             "name": "interest1",
  63.                             "label": "兴趣爱好1："
  64.                         },
  65.                         {
  66.                             "name": "interest2",
  67.                             "type": "input-text",
  68.                             "label": "兴趣爱好2："
  69.                         },
  70.                         {
  71.                             "name": "interest3",
  72.                             "type": "input-text",
  73.                             "label": "兴趣爱好3："
  74.                         },
  75.                         {
  76.                             "name": "interest4",
  77.                             "type": "input-text",
  78.                             "label": "兴趣爱好4："
  79.                         },
  80.                         {
  81.                             "name": "interest5",
  82.                             "type": "input-text",
  83.                             "label": "兴趣爱好5："
  84.                         },
  85.                         {
  86.                             "name": "interest6",
  87.                             "type": "input-text",
  88.                             "label": "兴趣爱好6："
  89.                         }
  90.                     ]
  91.                 }
  92.             ]
  93.         }
  94.     ]
  95. }

属性表

属性名 类型 默认值 说明
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" 区域成员 样式