Neptunian Parity Mnemonic

    @uiw/react-affix
    TypeScript icon, indicating that this package has built-in type declarations

    4.21.23 • Public • Published

    Affix 图钉

    Open in unpkg NPM Downloads npm version

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

    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) -

    Install

    npm i @uiw/react-affix

    DownloadsWeekly Downloads

    116

    Version

    4.21.23

    License

    MIT

    Unpacked Size

    49.1 kB

    Total Files

    16

    Last publish

    Collaborators

    • uiwjs
    • wcjiang