Popover

Viser rikt innhold i en portal, utløst av en knapp.

FigmaEndringslogg

Komponenten er klar til testing, men ikke ferdig

Komponenten har blitt utarbeidet nok til at det ikke kommer store endringer, men trenger å bli testet for å avdekke behov. Gi tilbakemelding om noe lugger eller mangler.

Breaking changes varsles i endringsloggen som patches, ikke som major oppdateringer, for å unngå versjonsinflasjon.

Send innspill

Eksempler

Popover example

<Popover>
  <PopoverTrigger asChild>
    <Button variant="primary">
      Åpne
    </Button>
  </PopoverTrigger>
  <PopoverPortal>
    <PopoverContent>
      <div>
        <div>Here be dragons</div>
        <div>Or whatever content you want</div>
      </div>
    </PopoverContent>
  </PopoverPortal>
</Popover>

Show close button

<Popover>
  <PopoverTrigger asChild>
    <Button variant="primary">
      Åpne
    </Button>
  </PopoverTrigger>
  <PopoverPortal>
    <PopoverContent showCloseButton>
      <div>
        <div>Here be dragons</div>
        <div>Or whatever content you want</div>
      </div>
    </PopoverContent>
  </PopoverPortal>
</Popover>

Dropdown menu example

<Popover>
  <PopoverTrigger asChild>
    <Button variant="dimmed">
      Åpne
    </Button>
  </PopoverTrigger>
  <PopoverPortal>
    <PopoverContent>
      <Stack gap="8" flexDirection="column" justifyContent="flex-start">
        <Button variant="ghost">
          Choice one
        </Button>
        <Button variant="ghost">
          Choice two
        </Button>
      </Stack>
    </PopoverContent>
  </PopoverPortal>
</Popover>

Retningslinjer

Retningslinjer for bruk er under utvikling.

Merk at det vi i designsystemet kaller "popover" ligner delvis på Apples context-menus

Kode

<Popover />