hiui-popper v0.0.3

Popper

基础弹层组件

快速使用

依附元素

import Popper from "@hi-ui/hiui/es/popper"
import React, { useState, useRef } from "react"
const demo = () => {
  const PopperAttachEle = useRef()
  const [showPopper, setShowPopper] = useState(false)
  return (
    <div>
      <div ref={PopperAttachEle}>popper-attachEle</div>
      <Popper
        // 弹出层的显示隐藏
        show={showPopper}
        // 依附的元素
        attachEle={PopperAttachEle.current}
        // 点击弹出层以及依附元素以外的区域时会触发该回调
        onClickOutside={() => {
          setShowPopper(false)
        }}
      >
        <div className='popper-content'>Popper Content</div>
      </Popper>
    </div>
  )
}

无依附元素

import Popper from "@hi-ui/hiui/es/popper"
import React, { useState, useRef } from react
const demo = () => {
  const [showPopper, setShowPopper] = useState(false)
  return (
    <div>
      <Popper
        // 弹出层的显示隐藏
        show={showPopper}
        left={20}
        top={20}
        // 点击弹出层以及依附元素以外的区域时会触发该回调
        onClickOutside={() => {
          setShowPopper(false)
        }}
      >
        <div className="popper-content">Popper Content</div>
      </Popper>
    </div>
  )
}

Props

Events