Popover
Intro
Popover er et skjult panel koblet til et element. Popoveren vil legge seg over alle andre elementer i grensesnittet. Du styrer selv når og hvordan den skal vises og skjules.
Eksempler
Popover kan kobles til de fleste typer elementer med bruk av ref.
import { useRef, useState } from "react";
import { Button, Popover } from "@navikt/ds-react";
const Example = () => {
const buttonRef = useRef<HTMLButtonElement>(null);
const [openState, setOpenState] = useState(false);
return (
<>
<Button
ref={buttonRef}
onClick={() => setOpenState(!openState)}
aria-expanded={openState}
>
Åpne popover
</Button>
<Popover
open={openState}
onClose={() => setOpenState(false)}
anchorEl={buttonRef.current}
>
<Popover.Content>Innhold her!</Popover.Content>
</Popover>
</>
);
};
Offset er avstanden mellom elementet og popoveren, og kan overstyres.
Her kan du teste ulike 'placement'-verdier. Popover styrer selv plassering hvis det ikke er plass i valgt retning.
Popover.Content legger bare på litt padding, så den kan utelates.
Komponenten brukes i
Retningslinjer
Ikke åpne på hover
Popover kan ikke åpnes på :hover i dag. For å støtte dette vil interaksjonen og oppførselen til komponenten være så ulik dagens Popover, at dette i praksis vil være en ny komponent.
Det er også en teknisk begrensning med at dagens løsning ikke kan brukes sammen med “inline” innhold som f.eks. lenker i løpende tekst. Vi ønsker heller å utvikle en egen komponent som løser hover bra for dette, så hvis det er noe du eller teamet ditt trenger ønsker vi gjerne tilbakemelding på det!
Tilgjengelighet
Elementet som åpner popoveren bør bruke aria-expanded=true/false for å indikere om den er åpen eller ikke.
Interaksjon med skjermleser
Popoveren bør helst ligge rett etter elementet som åpner den i DOM-en.
Props
Popover benytter seg av Floating UI.
Popover
children
- Type:
ReactNode - Description:
Popover content
anchorEl
- Type:
Element | null - Description:
Element popover anchors to
open
- Type:
boolean - Description:
Open state
onClose
- Type:
() => void - Description:
onClose callback
placement?
- Type:
"top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" - Default:"top"
- Description:
Default orientation of popover
Try to keep general usage to "top", "bottom", "left", "right".
arrow?
- Type:
boolean - Default:true
- Description:
Adds a arrow from dialog to anchor when true
offset?
- Type:
number - Default:16 w/arrow, 4 w/no-arrow
- Description:
Distance from anchor to popover
strategy?
- Type:
"absolute" | "fixed" - Default:"absolute"
- Description:
Changes what CSS position property to use You want to use "fixed" if reference element is inside a fixed container, but popover is not
flip?
- Type:
boolean - Default:true
- Description:
Changes placement of the floating element in order to keep it in view.
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLDivElement> - Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.currenttonull(or call the ref withnullif you passed a callback ref). React Docs
Popover.Content
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLDivElement> - Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.currenttonull(or call the ref withnullif you passed a callback ref). React Docs
Tokens
| Token | Fallback |
|---|---|
| --ac-popover-bg | --a-surface-default |
| --ac-popover-border | --a-border-default |
