<Popover>
are toggleable overlays for displaying small overlays on demand.
The <Popover>
component requires you to provide a trigger with
<PopoverTrigger>
that will handle the opening/closing of the overlay, as
well as the content for the overlay trough <PopoverBody />
Usage
import { Popover } from 'nr1'
Examples
Basic
1<Popover>2 <PopoverTrigger>Trigger</PopoverTrigger>3 <PopoverBody>4 <BlockText>Body</BlockText>5 </PopoverBody>6</Popover>;
Button as trigger
1<Popover>2 <PopoverTrigger>3 <Button>Trigger</Button>4 </PopoverTrigger>5 <PopoverBody>6 <BlockText>Body</BlockText>7 </PopoverBody>8</Popover>;
TextField as trigger
1<Popover>2 <PopoverTrigger>3 <TextField />4 </PopoverTrigger>5 <PopoverBody>6 <BlockText>Body</BlockText>7 </PopoverBody>8</Popover>;
Props
childrenrequirednode[]
This component accepts children of two types:
<PopoverTrigger>
to render the element that will open/close the overlay.<PopoverBody>
to render content inside the overlay.
Methods
Popover.render
function () => undefined