hiui-popper
0.0.3 • Public • Published 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
参数 |
说明 |
类型 |
可选值 |
默认值 |
show |
弹出层显示隐藏 |
boolean |
- |
false |
attachEle |
依附元素,会自动显示到该元素下方,并跟随自动 |
HTMLElement |
- |
- |
container |
弹出层依赖定位的元素,也就是弹出层参考定位的元素 |
HTMLElement |
- |
- |
width |
弹层宽度,如果存在attachEle参数且宽度未传入的情况下,会根据attachEle的宽度进行计算,其他情况请传入宽度 |
number | string | bool |
- |
- |
topGap |
距离依附元素的上偏移量,存在 attachEle 属性时有效, |
number |
0 |
0 |
leftGap |
距离依附元素的左偏移量,存在 attachEle 属性时有效, |
number |
0 |
0 |
zIndex |
堆叠顺序 |
number |
- |
1060 |
placement |
位于依附元素的方位 |
string |
bottom | bottom-start | bottom-end | top | top-start | top-end | left | left-start | left-end | right | right-start | right-end | top-bottom-start(使用该属性会自动根据依附元素距离可视区域自动翻转) | top-bottom | left-right | left-right-start |
bottom-start |
Events
参数 |
说明 |
类型 |
可选值 |
默认值 |
onClickOutside |
点击该元素外的回调方法 |
function |
- |
- |
setOverlayContainer |
如遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位 (3.0 新增) |
function(triggerNode) |
- |
() => document.body |
Readme
Keywords
nonePackage Sidebar
Install
Weekly Downloads