Gå til hovedinnhold
KOMPONENTER

Modaler

Modaler lar oss legge innhold på toppen av siden.

Komponenter

NavnTypePåkrevd?Beskrivelse
childrenReactNode

Innholdet i modalen

closeLabelstring

Skjermleser-label til lukk-knappen

initialFocusRefRefObject<HTMLElement>

En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen

openboolean

Flagg som sier om modalen er åpen

onDismiss(() => void)

Callback som kalles når brukeren ber om å lukke modalen

size"small" | "medium" | "large" | "extraSmall" | "extraLarge"

Størrelsen på modalen

titlestring

Tittelen som vises i modalen

I de aller fleste tilfeller, så kan du bare bruke <Modal /> komponenten direkte. Du kan rendre den hvor du vil i DOM-treet, den vil uansett dukke opp på riktig sted.

Du kan enten sende inn en open prop, eller rett og slett mounte/unmounte hele Modal-komponenten:

const Settings = () => {
  const [isOpen, setOpen] = React.useState(false);
  return isOpen ? (
    <Modal onDismiss={() => setOpen(false)}>Innstillinger</Modal>
  ) : (
    <PrimaryButton onClick={() => setOpen(true)}>
      Åpne innstillinger
    </PrimaryButton>
  );
};

Våre modaler baserer seg på Reach UI sin Dialog, og har det samme APIet.

ModalOverlay og ModalContent

NavnTypePåkrevd?Beskrivelse
openboolean

Flagg som sier om modalen er åpen

onDismiss(() => void)

Callback som kalles når brukeren ber om å lukke modalen

childrenReactNode

Innholdet i modalen

classNamestring

Ekstra klassenavn

initialFocusRefRefObject<HTMLElement>

En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen

NavnTypePåkrevd?Beskrivelse
childrenReactNode

Innholdet i modalen

classNamestring

Ekstra klassenavn

size"small" | "medium" | "large" | "extraSmall" | "extraLarge"

Størrelsen på modalen

titlestring

Tittelen som vises i modalen

Om du trenger litt mer fleksibilitet i designet av din modal, så kan du sette sammen din egen ved hjelp av de to komponentene <ModalOverlay /> og <ModalContent />. <Modal />-komponenten gjør egentlig ikke noe mer fancy enn å neste disse to inni hverandre, slik at det blir lettere å bruke.

Retningslinjer

Modaler skal brukes svært sparsommelig i flatene våre, og kun der det ikke gir mening å vise informasjonen i den eksisterende konteksten. Modaler avbryter brukerens eksisterende visuelle kontekst, og lager en ny.