bee-affix

bee-affix

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

开发调试

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