Popover — Kilden

Kildekode på GitHub · Les som Markdown

Popover viser rikt innhold i en flytende boks som åpnes ved klikk. Til forskjell fra Tooltip kan en popover inneholde interaktive elementer som knapper, lenker og skjemaer. Bygget på Radix UI Popover.

Importering

import { Popover, PopoverTrigger, PopoverContent } from "@kilden/designsystem";

Grunnleggende bruk

<Popover>
<PopoverTrigger asChild>
  <Button variant="outline">Åpne popover</Button>
</PopoverTrigger>
<PopoverContent>
  <div style={{ display: "grid", gap: "0.5rem" }}>
    <h4 style={{ fontWeight: 600, margin: 0 }}>Dimensjoner</h4>
    <p style={{ fontSize: "0.875rem", margin: 0, opacity: 0.7 }}>
      Sett dimensjonene for elementet.
    </p>
    <Separator />
    <div style={{ display: "grid", gap: "0.25rem" }}>
      <label htmlFor="width" style={{ fontSize: "0.875rem" }}>Bredde</label>
      <Input id="width" defaultValue="100%" />
    </div>
    <div style={{ display: "grid", gap: "0.25rem" }}>
      <label htmlFor="height" style={{ fontSize: "0.875rem" }}>Høyde</label>
      <Input id="height" defaultValue="auto" />
    </div>
  </div>
</PopoverContent>
</Popover>

Posisjonering

Popover støtter ulike plasseringer via side og align.

<div style={{ display: "flex", gap: "1rem", flexWrap: "wrap", justifyContent: "center" }}>
<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Over</Button>
  </PopoverTrigger>
  <PopoverContent side="top">
    <p style={{ margin: 0, fontSize: "0.875rem" }}>Popover over triggeren</p>
  </PopoverContent>
</Popover>
<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Under</Button>
  </PopoverTrigger>
  <PopoverContent side="bottom">
    <p style={{ margin: 0, fontSize: "0.875rem" }}>Popover under triggeren</p>
  </PopoverContent>
</Popover>
<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Venstre</Button>
  </PopoverTrigger>
  <PopoverContent side="left">
    <p style={{ margin: 0, fontSize: "0.875rem" }}>Popover til venstre</p>
  </PopoverContent>
</Popover>
<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Høyre</Button>
  </PopoverTrigger>
  <PopoverContent side="right">
    <p style={{ margin: 0, fontSize: "0.875rem" }}>Popover til høyre</p>
  </PopoverContent>
</Popover>
</div>

Med tilpasset bredde

Standard bredde er w-72 (18rem). Du kan overstyre med className.

<Popover>
<PopoverTrigger asChild>
  <Button variant="outline">Bred popover</Button>
</PopoverTrigger>
<PopoverContent className="w-96">
  <div style={{ display: "grid", gap: "0.5rem" }}>
    <h4 style={{ fontWeight: 600, margin: 0 }}>Innstillinger</h4>
    <p style={{ fontSize: "0.875rem", margin: 0, opacity: 0.7 }}>
      Her kan du konfigurere ulike innstillinger for komponenten.
      Denne popoveren er bredere enn standard.
    </p>
  </div>
</PopoverContent>
</Popover>

Bruksanbefalinger

Bruk for interaktivt innhold

Popover passer for skjemaer, innstillinger og innhold brukeren skal interagere med — altså innhold som trenger å forbli synlig mens du bruker det.

Ikke bruk for enkel tekst

For ren informasjon uten interaksjon, bruk Tooltip i stedet. Popover er overkill for en kort beskrivelse.

Bredde: 100%

Høyde: auto

Hold innholdet fokusert

En popover bør ha ett tydelig formål. Hold innholdet relevant og begrenset.

Masse innhold...

som krever scrolling...

og flere seksjoner...

og enda mer...

Ikke legg for mye innhold i en popover

Hvis innholdet er komplekst nok til å trenge scrolling, bør du bruke en Dialog i stedet.

Tilgjengelighet

Åpnes med klikk eller Enter/Space på triggeren
Fokus flyttes inn i popoveren når den åpnes
Escape lukker popoveren og returnerer fokus til triggeren
Innhold utenfor popoveren er utilgjengelig mens den er åpen

Props

Prop	Type	Default	Beskrivelse
`open`	`boolean`	—	Kontrollert åpen/lukket
`onOpenChange`	`(open: boolean) => void`	—	Kalles når tilstanden endres
`defaultOpen`	`boolean`	`false`	Om popoveren starter åpen

PopoverTrigger

Prop	Type	Default	Beskrivelse
`asChild`	`boolean`	`false`	Bruk child-elementet som trigger

PopoverContent

Prop	Type	Default	Beskrivelse
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Hvilken side av triggeren popoveren vises
`sideOffset`	`number`	`4`	Avstand fra triggeren i piksler
`align`	`"start" \| "center" \| "end"`	`"center"`	Justering langs siden