Sha256: b0dd950f8f14d398cb3de6649e527a7e9fe690d05ad9dbff80c0bf99f7196497
Contents?: true
Size: 1.11 KB
Versions: 948
Compression:
Stored size: 1.11 KB
Contents
import React, { useState } from 'react'
import {
Body,
Button,
PbReactPopover,
} from 'playbook-ui'
const PopoverZIndex = (props) => {
const [showPopover, setShowPopover] = useState(false)
const handleTogglePopover = () => {
setShowPopover(!showPopover)
}
const handleShouldClosePopover = (shouldClosePopover) => {
setShowPopover(!shouldClosePopover)
}
const popoverTrigger = (
<Button
onClick={handleTogglePopover}
text="Click Me"
variant="secondary"
/>
)
return (
<>
<div style={{ position: 'relative', zIndex: 2 }}>
<Body
marginBottom="md"
text="I've got a z-index of 2"
{...props}
/>
</div>
<PbReactPopover
closeOnClick="outside"
offset
padding="sm"
placement="top"
reference={popoverTrigger}
shouldClosePopover={handleShouldClosePopover}
show={showPopover}
zIndex={3}
{...props}
>
{'I have a custom z-index of 3'}
</PbReactPopover>
</>
)
}
export default PopoverZIndex
Version data entries
948 entries across 948 versions & 2 rubygems