@elliemae/react-popper

反弹出器

反射包装 波普尔.js (英语)。 。 。 .

重要说明: poper. js为 没有 一个工具提示库,这是一个 定位引擎 用于构建诸如(但不限于)工具提示等特性.

安装

通过软件包管理器 :

npm install react-popper --save
# or
yarn add react-popper

通过 script 标记( UMD 库已曝光为 ReactPopper:

<script src="https://unpkg.com/react-popper/dist/index.umd.js"></script>

使用量

使用 [email protected]您可以找到它的文档 点击这里

示例

import { Manager, Reference, Popper } from 'react-popper';

const Example = () => (
  <Manager>
    <Reference>
      {({ ref }) => (
        <button type="button" ref={ref}>
          Reference element
        </button>
      )}
    </Reference>
    <Popper placement="right">
      {({ ref, style, placement, arrowProps }) => (
        <div ref={ref} style={style} data-placement={placement}>
          Popper element
          <div ref={arrowProps.ref} style={arrowProps.style} />
        </div>
      )}
    </Popper>
  </Manager>
);

react-popper 使用名为“反应”的模式 "放弃道具"如果你没有 熟悉,请读更多 官方反应文档。 。 。 .

使用回放 QQ15 还是Preact? 由它们创建的组件不支持返回 碎片这意味着你需要 关闭 <Reference /> 财务报告和审定财务报表 <Popper /> 变成单一的、共同的、, <div /> 将制作 react-popper 工作时.

API 文档

这个 Manager 组件是一个简单的包装器,需要包围其它所有 react-popper 按顺序排列 让他们互相交流.

这个 Popper 组件接受属性 children, (中文(简体) ), placement, (中文(简体) ), modifiers, (中文(简体) ), eventsEnabled 财务报告和审定财务报表 positionFixed。 。 。 .

<Popper
  innerRef={(node) => this.popperNode = node}
  placement="right"
  modifiers={{ preventOverflow: { enabled: false } }}
  eventsEnabled={true}
  positionFixed={false}
>
    { props => [...] }
</Popper>

children

children: ({|
  ref: (?HTMLElement) => void,
  style: { [string]: string | number },
  placement: ?Placement,
  outOfBoundaries: ?boolean,
  scheduleUpdate: () => void,
  arrowProps: {
    ref: (?HTMLElement) => void,
    style: { [string]: string | number },
  },
|}) => Node

将包含下列属性的对象作为参数的函数( 递归道具):

• ref: 用来取回 反应参考器 会 议 日 程 和 议 程 流行乐 键.
• style: 包含必要的 CSS 样式( React CSS 属性),由 Popper.js 计算以正确定位 流行乐 键.
• placement: 描述在 Popper.js 应用了所有的修饰符后, 您的 popper 的放置 可能翻转或更改原提供的 placement 属性。 你可以用这个来改变 弹出器的样式和箭头的样式。 比如,你可以用这个 属性将箭头指向正确的方向.
• outOfBoundaries:一个布尔表示如果弹出元素超越其边界.
• scheduleUpdate: 您可以调用一个函数来调度一个 Popper.js 位置更新 。 它会直接呼叫 波普尔# 时间安排更新 方法.
• arrowProps: 一个对象,包含 style 财务报告和审定财务报表 ref 属性与 第1和第2个论点: children,但相对 箭头 键。 这个 style 属性包含 left 财务报告和审定财务报表 top 偏移值,用于将箭头置于弹出器内。 这些值可以与进一步的自定义样式和定位相合并. 见 演示 举个例子.

innerRef

innerRef?: (?HTMLElement) => void

可用于获取 popper 引用的函数

placement

placement?: PopperJS$Placement;

表格中所列公认放置值之一 Popper.js 文档。 。 。 .
您的流行乐会根据这个地产的价值来放置.
默认为 bottom。 。 。 .

outOfBoundaries: ?boolean;

可以用来隐藏弹出元素的布尔 以防其溢出 从它的边界. 更多信息。 。 。 .

eventsEnabled

eventsEnabled?: boolean;

告诉 react-popper 以启用或禁用 Popper.js 事件听众。 。 。 . true 默认.

positionFixed

设定此属性为 true 告诉Popper.js使用 position: fixed 战略 以定位弹出元素。 默认是虚假的,意味着它会使用 position: absolute 战略.

modifiers

modifiers?: PopperJS$Modifiers;

包含自定义设置的对象 Popper.js 修饰器。 。 。 .
您可以使用此属性来覆盖他们的设置或注入自定义的设置 .

用法为 ReactDOM.createPortal

Popper.js聪明到可以工作,即使 流行乐 财务报告和审定财务报表 参考文献 元素没有 在同一DOM语境中.
这意味着你可以使用 ReactDOM.createPortal (或任何预回16的可选方案)将弹出元件移到DOM的别处.

如果您想要将工具提示放置在 overflow: hidden 集装箱 以便你们欲溢出。 请注意,你也可以尝试 positionFixed 战略 用更少的麻烦获得类似的效果.

import { Manager, Reference, Popper } from 'react-popper';

const Example = () => (
  <Manager>
    <Reference>
      {({ ref }) => (
        <button type="button" ref={ref}>
          Reference
        </button>
      )}
    </Reference>
    {ReactDOM.createPortal(
      <Popper>
        {({ placement, ref, style }) => (
          <div ref={ref} style={style} data-placement={placement}>
            Popper
          </div>
        )}
      </Popper>,
      document.querySelector('#destination')
    )}
  </Manager>
);

无参考文献的使用 HTMLElement

每当您需要根据任意坐标定位弹出器时,您可以提供 Popper 带有 referenceElement 用于替换 referenceProps.getRef 反应裁判.

这个 referenceElement 属性必须是具有兼容 HTMLElement 一、导 言 Popper.js 参考对象文档,这意味着如果需要,您也可以提供真实的 HTML 元素.

若为 referenceElement 将优先于任何 referenceProps.ref 提供参考文献.

import { Popper } from 'react-popper';

class VirtualReference {
  getBoundingClientRect() {
    return {
      top: 10,
      left: 10,
      bottom: 20,
      right: 100,
      width: 90,
      height: 10,
    };
  }

  get clientWidth() {
    return this.getBoundingClientRect().width;
  }

  get clientHeight() {
    return this.getBoundingClientRect().height;
  }
}

// This is going to create a virtual reference element
// positioned 10px from top and left of the document
// 90px wide and 10px high
const virtualReferenceElement = new VirtualReference();

// This popper will be positioned relatively to the
// virtual reference element defined above
const Example = () => (
  <Popper referenceElement={virtualReferenceElement}>
    {({ ref, style, placement, arrowProps }) => (
      <div ref={ref} style={style} data-placement={placement}>
        Popper element
        <div ref={arrowProps.ref} style={arrowProps.style} />
      </div>
    )}
  </Popper>
);

流程和类型脚本类型

这个库是用Flow构建的,但它也支持TypeScript.

您可以在 src/index.js,则 类型脚本定义 typings/react-popper.d.ts。 。 。 .

本地运行

安装依赖关系

yarn

运行 dev 模式

yarn demo:dev

打开浏览器访问 :

http://localhost:1234/