反弹出器

反应 poper.js (英语) 组件.

特征数字 :

• 方便使用, 请检查下面的用法 .
• 对道具进行回放更改,在选项改变时重新发回弹出器.
• 例如,Nestable可以有两个弹出窗口响应 鼠标输入 财务报告和审定财务报表 单击 按钮的事件.

试试看

使用量

用纱线安装 :

yarn add @d8660091/react-popper

或npm: (中文(简体) )

npm install @d8660091/react-popper -P

在您的源文件中导入 :

import Popper from '@d8660091/react-popper'

// A simple popper
<Popper
  options={{ 
    placement: 'bottom'
  }}
  renderRef={({ setReference, toggle }) => (
    <span ref={setReference} onClick={toggle}>
      Popover Trigger
    </span>
  )}>
  <div>Popper content</div>
</Popper>

// A nested popper
<Popper
  options={{
    placement: 'right',
  }}
  renderRef={({ setReference, open, close, isOpened }) => (
    <Popper
      options={{
        placement: 'bottom',
      }}
      renderRef={({
        setReference: setInnerReference,
        toggle: innerToggle,
        isOpened: isInnerOpened
      }) => (
        <button
          ref={el => {
            setReference(el)
            setInnerReference(el)
          }}
          onClick={() => {
            close()
            innerToggle()
          }}
          onMouseEnter={() => {
            !isInnerOpened && open()
          }}
          onMouseLeave={() => {
            close()
          }}>
          A button which triggers two popper, one on hover, one on click
        </button>
      )}>
      <div>
        On click inner popper.
      </div>
    </Popper>
  )}>
  <div>
    On hover outer popper content.
  </div>
</Popper>

类型(index.d.ts):

declare module '@d8660091/react-popper' {
  import { PopperOptions } from 'popper.js'
  import * as React from 'react'

  interface RenderProps extends PopperProps {
    setReference: React.Ref<HTMLElement>
    setPop: React.Ref<HTMLElement>
    isOpened: boolean
    open: () => void
    close: () => void
    toggle: () => void
  }

  type PopperProps = {
    renderRef: (props: RenderProps) => React.ReactNode
    renderPop?: (props: RenderProps) => React.ReactNode
    options?: PopperOptions
    children?: React.ReactNode
    canClickOutside?: Boolean // default: false
    style?: Object
    className?: string
    defaultIsOpened?: Boolean // default: false
  }

  const Popper: React.ComponentClass<PopperProps>

  export default Popper
}

• 选项: poper.js 选项。 。 。 .
• 渲染参考:用于提供参考的功能,即用于定位弹出器的元素.
• 孩子们:在弹出器内满足.
• canClick Outside:如果是真的,Popper不会在用户点击外部时隐藏自己.
• 样式和类Name: 转到 pop 而不是引用 .
• commercePop: 如果设置了此函数, 将会忽略子, 样式和类名, 并使用此函数提供 Popper .
• 默认已打开: 挂载时是否打开 Popper

可点击区域a

您可以点击 ClickableRea 而不关闭 popper , 当您有一个 由 另一 家 Popper 提供的可交互 Popper 时, 则有用 .

import { ClickableArea } from '@d8660091/react-popper'

<ClickableArea>
  clickable text
</ClickableArea>

故事书 - 更多的用途,包括具体说明选项、样式和筑巢。 也可以通过现场编辑选项和放置来播放组件.