Popover

<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