as-react-anchor

内容导航栏

简介

内容导航栏菜单可定位至文档指定位置并高亮显示

目前暂未支持多层导航结构

主要功能

• 通过解析JSON数据生成内容导航栏
  • 定义导航栏显示名称，对应锚点链接
• 支持指定滚动容器
  • 默认滚动容器为window
• 支持指定触发导航栏高亮的窗口顶部偏移量
• 支持指定锚点区域边界

组件安装

npm install --save as-react-anchor

组件引入方式

import Anchor from 'as-react-anchor';

组件参数说明

参数名称（props）	参数枚举值	说明
config：	Object	导航栏配置,包括滚动容器以及导航栏内容
offsetTop：	Number	触发导航栏高亮的窗口顶部偏移量
bound：	Number	锚点区域边界

详细参数示例：

config={
    container:window, //滚动容器
    links:[
        {
          title:"一、标题1", //导航栏显示内容
          link:"#doc/anchor/#title1" //锚点链接
        },
        {
          title:"二、标题2",
          link:"#doc/anchor/#title2"
        },
        {
          title:"三、标题3",
          link:"#doc/anchor/#title3"
        }
    ]
}

使用示例

<Anchor config={config} offsetTop={60} bound={4}/>