To implement Popover component into your project you’ll need to add the import:
import Popover from "@kiwicom/orbit-components/lib/Popover";
After adding import into your project you can use it simply like:
<Popover content="Your content">
<Button />
</Popover>
Props
Table below contains all types of the props available in the Popover component.
Name | Type | Default | Description |
---|---|---|---|
actions | React.Node |
Actions to display in the Popover See Functional specs. | |
content | React.Node |
The content to display in the Popover. | |
children | React.Node |
The reference element where the Popover will appear. | |
dataTest | string |
Optional prop for testing purposes. | |
fixed | boolean |
Changes position to fixed from absolute, good for use in sticky components. | |
noPadding | boolean |
true |
Adds or removes padding around popover’s content. |
opened | boolean |
Prop for programmatically controlling Popover inner state. If opened is present open triggers are ignored. |
|
preferredAlign | enum |
"start" |
The preferred position to choose See Functional specs. |
preferredPosition | enum |
"bottom" |
The preferred align to choose See Functional specs. |
overlapped | boolean |
false |
If true , the content of Popover will overlap the trigger children. |
width | string |
Width of popover, if not set the with is set to auto . |
|
onClose | () => void | Promise |
Function for handling onClose. | |
onOpen | () => void | Promise |
Function for handling onOpen. |
enum
position | Align |
---|---|
"bottom" |
"start" |
"top" |
"end" |
Functional specs
-
Whenever event
onClick
fires, the script inside this component will calculate possible positions that can be applied and the first possible will be applied. -
You can prefer one position that will be used if possible, otherwise the default order in
enum
table will be used. -
You can prefer align that will be used if possible, otherwise the default order in
enum
table will be used. -
Actions are a way to override default close behavior with your own actions, mainly
Buttons
keep in mind that one of the actions should close the popover. -
The Popover component supports rendering of many different components inside its children. You can use combination of e.g. Text, Stack, ListChoice for example:
<Popover
content={
<React.Fragment>
<ListChoice
title="Choice Title"
description="Further description"
icon={<Accommodation />}
onClick={action}
/>
<ListChoice
title="Choice Title"
description="Further description"
icon={<Accommodation />}
onClick={action}
/>
<ListChoice
title="Choice Title"
description="Further description"
icon={<Accommodation />}
onClick={action}
/>
</React.Fragment>
}
>
<Button>Open Popover</Button>
</Popover>