@elemental-ui-alpha/popover
v0.0.2
Published
Popovers are small overlays that open on demand. They let users access additional content and actions without cluttering the page.
Downloads
4
Readme
Popover
import { Popover, PopoverDialog, usePopoverDialog } from '@elemental-ui-alpha/popover';
Usage
Component
Most of the time you will be able to use Popover
. This compound component
takes a trigger
element and wires it up to the dialog for you.
<Popover trigger={<Button>trigger</Button>}>
<Box padding="medium">Some popover content</Box>
</Popover>
Hook
For situations where you need more control, like access to refs and handlers,
you will need to combine the PopoverDialog
with the usePopoverDialog
hook.
const { isOpen, dialog, trigger } = usePopoverDialog('top');
return (
<>
<Button ref={trigger.ref} {...trigger.props}>
{isOpen ? 'close' : 'open'}
</Button>
{isOpen && (
<PopoverDialog ref={dialog.ref} {...dialog.props}>
<Box padding="medium">Some popover content</Box>
</PopoverDialog>
)}
</>
);
Placement
As a property of the Popover
component, and the only argument to the
usePopoverDialog
hook.
Where, in relation to the trigger, to place the dialog:
auto
left
right
top
bottom
(default)auto-start
auto-end
top-start
top-end
bottom-start
bottom-end
right-start
right-end
left-start
left-end
<Popover trigger={<Button>trigger</Button>} placement="left-start">
<Box padding="medium" width={220}>
<Heading level="4">Placement</Heading>
<Text as="p" marginTop="small">
Some popover content, that goes on for a bit to illustrate placement.
</Text>
</Box>
</Popover>