Components
Popover
Popovers are used to show detailed information inside a pop-up.
codeExamples
guidelines
The Popover component is designed to display additional information without requiring the user to navigate away from the current context. It should be used to show additional information about an element or situation. If you want to add information that only describes a tool or element, please see TooltipsEkstern lenke.
Accessibility
The popovertrigger comes with an aria-expanded=true/false. Do not override this prop.
code
<Popover />
import { Popover } from "@vygruppen/spor-react";
Wrapper component for a popover
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | Children should contain PopoverTrigger and PopoverContent | |
closeOnEscape | boolean | Defaults to true. Wether to close the popover when the Escape-button is pressed. | |
closeOnInteractOutside | boolean | Defaults to true. Wether the popover should be closed when user clicks outside of the popover. | |
defaultOpen | boolean | Defaults to false | |
onOpenChange | (details: {details: {open: boolean}}) => void | ||
open | boolean | ||
positioning | PositioningOptions | Different options for positon. Placement can be set to "left", "right", "top", "bottom" | |
size | "sm" | "md" | "lg" | Defaults to "sm". Use "md" or "lg" if you have lots of content. |
<PopoverTrigger />
import { PopoverTrigger } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | The anchor of the tooltip. Should be something clickable or focusable like a button |
<PopoverContent />
import { PopoverContent } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | Content of popover | |
showCloseButton | boolean | Defaults to false |