@uiw/react-affix NPM | npm.io

4.22.3 • Published 5 months ago

Install

Weekly downloads

315

License

MIT

Repository

Last release

5 months ago

Affix 图钉

使用图钉，可以将内容固定在屏幕可视范围，并且不随页面的滚动而滚动，常用于菜单等。

import { Affix } from 'uiw';
// or
import Affix from '@uiw/react-affix';

基本用法

import React from 'react';
import { Affix, Button } from 'uiw';

export default function Demo() {
  return (
    <Affix offsetTop={60}>
      <Button type="primary">1 当按钮距离顶部距离为 0，按钮被钉在顶部</Button>
    </Affix>
  )
}

钉在底部

这个实例需要你缩小窗口高度，就可以测试看效果啦。

import React from 'react';
import { Affix, Button } from 'uiw';

export default function Demo() {
  return (
    <Affix offsetBottom={10} onChange={(affixed) => {
      console.log('affixed::', affixed);
    }}>
      <Button type="primary" style={{ marginLeft: 20 }}>2 当按钮距离底部距离为 0，按钮被钉在底部</Button>
    </Affix>
  )
}

Props

参数	说明	类型	默认值
offsetBottom	距离窗口底部达到指定偏移量后触发	Number	-
offsetTop	距离窗口顶部达到指定偏移量后触发	Number	-
onChange	固定状态改变时触发的回调函数	Function(affixed)	-

affix react-affix design uiw uiw-react react.js react react-component component components ui css uikit react-ui framework front-end frontend

@infinitebrahmanuniverse/nolb-_ui @zalastax/nolb-_ui uiw

7 months ago

6 months ago

6 months ago

5 months ago

1 year ago

1 year ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago