1.0.1 • Published 5 years ago

as-react-anchor v1.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
5 years ago

as-react-anchor

Travis npm package Coveralls

内容导航栏

简介

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

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

主要功能

  • 通过解析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}/>
1.0.1

5 years ago

1.0.0

6 years ago