1 | # bee-anchor
|
2 |
|
3 | [![npm version](https://img.shields.io/npm/v/bee-anchor.svg)](https://www.npmjs.com/package/bee-anchor)
|
4 | [![Build Status](https://img.shields.io/travis/tinper-bee/bee-anchor/master.svg)](https://travis-ci.org/tinper-bee/bee-anchor)
|
5 | [![Coverage Status](https://coveralls.io/repos/github/tinper-bee/bee-anchor/badge.svg?branch=master)](https://coveralls.io/github/tinper-bee/bee-anchor?branch=master)
|
6 | [![devDependency Status](https://img.shields.io/david/dev/tinper-bee/bee-anchor.svg)](https://david-dm.org/tinper-bee/bee-anchor#info=devDependencies)
|
7 | [![NPM downloads](http://img.shields.io/npm/dm/bee-anchor.svg?style=flat)](https://npmjs.org/package/bee-anchor)
|
8 | [![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/tinper-bee/bee-anchor.svg)](http://isitmaintained.com/project/tinper-bee/bee-anchor "Average time to resolve an issue")
|
9 | [![Percentage of issues still open](http://isitmaintained.com/badge/open/tinper-bee/bee-anchor.svg)](http://isitmaintained.com/project/tinper-bee/bee-anchor "Percentage of issues still open")
|
10 |
|
11 |
|
12 | react bee-anchor component for tinper-bee
|
13 |
|
14 | 基于 [gumshoejs](https://www.npmjs.com/package/gumshoejs) 的锚点组件
|
15 |
|
16 | ## 依赖
|
17 |
|
18 | - react >= 15.3.0
|
19 | - react-dom >= 15.3.0
|
20 | - prop-types >= 15.6.0
|
21 |
|
22 | ## 使用方法
|
23 |
|
24 | ```
|
25 | import Anchor from 'bee-anchor';
|
26 | import 'bee-anchor/build/Anchor.css';
|
27 |
|
28 | ```
|
29 |
|
30 |
|
31 |
|
32 | ## API
|
33 |
|
34 | |参数|说明|类型|默认值|
|
35 | |:---|:----:|:---:|------:|
|
36 | |selector|目标元素选择器|string|-|
|
37 | |offset|向上偏移量,例如有固定header,则 offset=()=>return header.getBoundingClientRect().height|()=>{}|0|
|
38 | |navClass|当前被激活锚点新增的类名|string|'active'|
|
39 | |contentClass|当前被激活区域新增的类名|string|'active'|
|
40 | |nested|是否有嵌套导航|bool|false|
|
41 | |nestedClass|嵌套导航激活时父节点的类名|string|'active'|
|
42 | |event|是否添加监听事件|bool|true|
|
43 | |activeHandle|被激活的回调,三个参数,以基本示例为例,列表li、锚点a、激活区域p|func|()=>{})|
|
44 | |deactiveHandle|激活后的回调|func|()=>{})|
|
45 |
|
46 |
|
47 | #### 开发调试
|
48 |
|
49 | ```sh
|
50 | $ npm install -g bee-tools
|
51 | $ git clone https://github.com/tinper-bee/bee-anchor
|
52 | $ cd bee-anchor
|
53 | $ npm install
|
54 | $ npm run dev
|
55 | ```
|