Kom i gang som designer

Endringslogg

popover-sandbox

Popover tilbyr muligheten til å plassere den top, right, bottom og left relatert til ankeret. Disse orienteringene har også muligheten til å definere start/end, eks top-end. Vi anbefaler for det meste å holde seg til de 4 førstnevnte. Popover styrer selv plassering hvis den ikke har plass i ønsket retning.

Popover kan brukes med eller uten pil, basert på ønsket variant.

Basert på bruk, kan offset overstyre standardverdiene. Eks for en popover med søketreff under et søkefelt ønskes kanskje 0px offset basert på designet.

Selve Popover-komponenten har ingen padding, men har en utility-komponent 

Popover er et skjult panel koblet til et anker. Du styrer selv når det skal vises og brukes ofte som en popup for å fortelle brukeren om noe som har skjedd. Popoveren vil legge seg over alle andre elementer i grensesnittet.

yarn og npm

@navikt/ds-react install

Kom i gang som utvikler!

children

anchorEl

open

onClose

Orientation for popover
@note Try to keep general usage to "top", "bottom", "left", "right"

placement

Adds a arrow from dialog to anchor when true

arrow

offset

Changes what CSS position property to use
You want to use "fixed" if reference element is inside a fixed container, but popover is not

Type	`ReactNode`
Description	Popover content

Type	`Element \| null`
Description	Element popover anchors to

Type	`boolean`
Description	Open state

Type	`() => void`
Description	onClose callback

Type	`Placement`
Description	Orientation for popover @note Try to keep general usage to "top", "bottom", "left", "right"
Default	`"right"`

Popover@navikt/ds-react

Installasjon

Props

Var denne artikkelen til hjelp?