Gå til hovedinnhold
KOMPONENTER

Popover

npmv2.7.3

Popover er en flytende boks for å vise ekstra kontekstuell informasjon, interaksjoner eller innhold på flere linjer.

npm install @entur/tooltip
@import '@entur/tooltip/dist/styles.css';

Komponenter

Popover

import { Popover } from '@entur/tooltip';
NavnTypeDefault-verdiBeskrivelse
children?ReactNode

Innholdet i Popover

placement?Placement "bottom-start"

Plasseringen av Popover

showPopover?boolean

Hvis du ønsker å styre state selv kan du sende inn state her

setShowPopover?Dispatch<SetStateAction<boolean>>

Hvis du ønsker å styre state selv kan du sende inn setState her

Retningslinjer for bruk

Popover er en ikke-modal dialog, men en flytende boks for å vise ekstra kontekstuell informasjon, interaksjoner eller innhold på flere linjer, når brukerne hovrer eller fokuserer på et interaktivt element. I motsetning til en vanlig Tooltip, kan en bruker samhandle med popover-inholdet, for eksempel med enkle handlinger som klikk på lenker og knapper.

Popover kan brukes som en hjelpeguide når det er første gangen brukeren skal bruke en applikasjon eller hvis man trenger å introdusere en ny funksjonalitet. Popover kan også brukes til avanserte funksjoner som filterkontroll som kombinerer flere formkontrolller som Radio, Checkbox, Datapicker og Dropdown.

Prinsipper

Innafor
  • Bruk en handlingsknapp for å utløse en popover.
  • Minst et interaktiv element skal være inne i en popover.
  • Bruk hvis det er lite plass på siden, for mye informasjon til å ha det inline og hvis det skaper for mye rot å vise innholdet med en gang.
  • Bruk en popover hvis du trenger at innholdet skal forbli åpent, uten å måtte hovre på elementet slik som Tooltip.
Uttafor
  • Hvis det bare er en tekst som ikke er interaktiv, vurder å bruk en Tooltip istedet.
  • Unngå å bruk en popover for skjemaer eller medieinnhold som video, bilde og grafikk. Vurder heller å bruke en Modal.
  • Unngå å bruk popover når brukerne ikke trenger å se resten av innholdet på skjermen. Vurder heller en Modal.
Rediger denne siden på Bitbucket