1.3.0 • Published 4 years ago

xy-affix v1.3.0

Weekly downloads
1
License
MIT
Repository
github
Last release
4 years ago
IEChromeFirefoxOperaSafari
IE 10+ ✔Chrome 31.0+ ✔Firefox 31.0+ ✔Opera 30.0+ ✔Safari 7.0+ ✔

NPM version node version npm download

xy-affix

xy-affix

图钉组件, 固定某个元素。

特性

  • 支持上下 2 个方向的固定
  • 支持auto自动固定, 让元素始终保持固定在可视区域内
  • offset 偏移量指定

安装

# yarn
yarn add xy-affix

使用例子

import React from "react";
import ReactDOM from "react-dom";
import Affix from "xy-affix";
ReactDOM.render(
    <Affix offset={10}>
        <button>被固定的按钮</button>
    </Affix>,
    container,
);

何时使用

当内容区域比较长,需要滚动页面时,这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。

页面可视范围过小时,慎用此功能以免遮挡页面内容。

API

按钮

属性说明类型默认值
placement固定方向"top", "bottom", "auto""auto"
offset偏移量, 离窗口侧达到指定偏移量后触发number-
fixed是否启用固定booleantrue
target设置 Affix 需要监听其滚动事件的元素,值为一个返回对应 DOM 元素的函数() => HTMLElement() => windows
onChange固定状态改变回调(fixed: boolean) => void-

开发

yarn run start

例子

http://localhost:6006

测试

yarn run test

开源许可

xy-affix is released under the MIT license.

1.3.0

4 years ago

1.2.3

5 years ago

1.2.2

5 years ago

1.2.1

5 years ago

1.2.0

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago

0.0.9

5 years ago

0.0.8

5 years ago