1.0.20 • Published 3 years ago

bee-affix v1.0.20

Weekly downloads
141
License
MIT
Repository
github
Last release
3 years ago

bee-affix

npm version Build Status Coverage Status devDependency Status NPM downloads Average time to resolve an issue Percentage of issues still open

react bee-affix component for tinper-bee

some description...

Affix

将页面元素钉在可视范围。 当内容区域比较长,需要滚动页面时,这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。页面可视范围过小时,慎用此功能以免遮挡页面内容。

使用方法

import Affix from 'bee-affix';

React.render(<Affix><div className="content"></div></Affix>,
         document.getElementById('target'));

样式引入

<link rel="stylesheet" href="./node_modules/bee-affix/build/Affix.css">
//或是
import "./node_modules/bee-affix/src/Affix.scss"
//或是
import "./node_modules/bee-affix/build/Affix.css"

API

参数说明类型默认值
container固定元素所属容器objectdocument.body
offsetTop固定被触发距离,默认是0 ,可选的属性number0
horizontal被固定时是否可以左右滑动,默认是false,可选的属性booleanfalse
canHidden当Affix的内容高度超过container可视区域的高度,Affix是否可以被隐藏一部分内容,false:affix始终完全展示,true:展示部分受container限制booleanfalse
target设置 Affix 需要监听其滚动事件的元素,值为一个返回对应 DOM 元素的函数,默认值() => windowfunction() => window
onChange触发固定或者固定取消时的回调函数,返回值{ affixed: true, event: evt}function-
onTargetChange时刻获取Affix的状态值,返回值{state}function-
childrenRef如果affix下面的内容高度是变化的,让childrenRef是affix下内容的ref;如果affix下面的内容高度不变,不需要使用这个属性objectnull

开发调试

$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-affix
$ cd bee-affix
$ npm install
$ npm run dev
1.0.19

3 years ago

1.0.20

3 years ago

1.0.18

4 years ago

1.0.17

5 years ago

1.0.17-alpha.0

5 years ago

1.0.16

5 years ago

1.0.16-alpha.0

5 years ago

1.0.15

5 years ago

1.0.14

5 years ago

1.0.13

6 years ago

1.0.12

6 years ago

1.0.11

6 years ago

1.0.10

6 years ago

1.0.9

6 years ago

1.0.8

6 years ago

1.0.7

6 years ago

1.0.5

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

7 years ago

1.0.0

7 years ago

0.1.1

7 years ago