UNPKG

@gravity-ui/uikit

Version:

Gravity UI base styling and components

github.com/gravity-ui/uikit

gravity-ui/uikit

52 lines (43 loc) • 7 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
# Popover `Popover` shows floating, optionally interactive content (text, links, or buttons) anchored to a child element and opened on hover or click. It wraps [`Popup`](./Popup.md) with built-in trigger interactivity, using the `ReactElement` passed via the `children` property as the trigger. ```tsx import {Popover} from '@gravity-ui/uikit'; ``` ## Usage Wrap HTML element or any component that accepts native DOM handlers and ARIA attributes in properties (i.e. `Button`) with `Popover` component. Put your content into `content` property. ```jsx import {Button, Popover} from '@gravity-ui/uikit'; <Popover content="Content"> <Button>Click or hover me</Button> </Popover>; ``` ## Properties | Name | Description | Type | Default | | :------------------- | :------------------------------------------------------------------------------------------------------------ | :-----------------------------------------------------------------: | :-------------: | | children | `ReactNode` which accepts DOM handlers | `React.ReactNode` | | | className | HTML `class` attribute for root node | `string` | | | container | DOM element to which component is mounted via `Portal` | `HTMLElement` | `document.body` | | content | Any content to render inside the `Popover` | `React.ReactNode` | | | contentClassName | HTML `class` attribute for content node | `string` | | | delay | Wait specified time in milliseconds before changing `open` state | `number` `{open?: number; close?: number}` | | | disableEscapeKeyDown | Do not dismiss on `Esc` keydown | `boolean` | `false` | | disableLayer | Do not use `LayerManager` on stacking floating elements | `boolean` | `false` | | disableOutsideClick | Do not dismiss on outside click | `boolean` | `false` | | disablePortal | Disables using `Portal` | `boolean` | `false` | | disabled | Do not open on any event | `boolean` | `false` | | enableSafePolygon | Use dynamic polygon area when moving the pointer from trigger to `Popover` content to prevent it from closing | `boolean` | `false` | | hasArrow | Render an arrow pointing to the trigger | `boolean` | `false` | | keepMounted | `Popover` will not be removed from the DOM upon hiding | `boolean` | `false` | | middlewares | `Floating UI` middlewares. If set, they will completely overwrite the default middlewares. | `Array<Middleware>` | | | modal | Enables focus trapping behaviour | `boolean` | `false` | | offset | `Floating UI` offset value | `PopoverOffset` | `4` | | onOpenChange | Function that is called when the `open` state changes | `Function` | | | open | Manually control the `open` state | `boolean` | | | placement | `Floating UI` placement | `Placement` `Array<Placement>` `"auto"` `"auto-start"` `"auto-end"` | `"top"` | | qa | Test attribute (`data-qa`) | `string` | | | rest | How much time in ms the cursor must be rest before open. | `number` | `0` | | strategy | `Floating UI` positioning strategy | `"absolute"` `"fixed"` | `"absolute"` | | style | HTML `style` attribute for root node | `string` | | | toggle | Whether to toggle the `open` state with repeated clicks | `boolean` | `true` | | trigger | Which event should open the `Popover`. Default `all` value refers to both `hover` and `click` | `"all"` `"click"` | `"all"` |