Components
Code examples
() => { return ( <Popover> <PopoverTrigger> <Button variant="primary">Click me</Button> </PopoverTrigger> <PopoverContent>This is the content of the popover</PopoverContent> </Popover> ); };
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 | |
size | "sm" | "md" | "lg" | Defaults to "sm". Use "md" or "lg" if you have lots of content. | |
open | boolean | ||
onOpenChange | (details: {details: {open: boolean}}) => void | ||
positioning | PositioningOptions | Different options for positon. Placement can be set to "left", "right", "top", "bottom" |
<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 |