Modal

Modal er et midtstilt vindu som legger seg over det andre innholdet, med en mørk gjennomsiktig bakgrunn. Komponenten bruker npm-pakken React-modal og extender props fra den.

NPM-pakke

Navn:nav-frontend-modal
Siste versjon:1.0.55
Peer dependencies:@types/react-modal classnames nav-frontend-lukknapp nav-frontend-modal-style prop-types react react-modal

Installering

npm install nav-frontend-modal @types/react-modal classnames nav-frontend-lukknapp nav-frontend-lukknapp-style nav-frontend-core prop-types react nav-frontend-modal-style nav-frontend-paneler-style react-modal --save

Kopiert!


yarn add nav-frontend-modal @types/react-modal classnames nav-frontend-lukknapp nav-frontend-lukknapp-style nav-frontend-core prop-types react nav-frontend-modal-style nav-frontend-paneler-style react-modal

Kopiert!

Moduler

Import

import ModalWrapper from 'nav-frontend-modal';

Kopiert!

React props

PropertyTypeDefaultRequiredDescription
children
ReactNode
-
Innholdet i modalen
className
string
-
Klasse som legges til dialog
closeButton
boolean
-
Bestemmer om modalen selv skal legge til en lukkeknapp
closeTimeoutMS
number
-
Tall som beskriver hvor lenge modalen venter før den lukkes
contentClass
string
-
Klasse for content-taggen
contentLabel
string
-
En beskrivelse av formålet med modalen, blir satt som `aria-label`
isOpen
boolean
-
Bestemmer om modalen skal være synlig
onAfterOpen
() => void
-
Funksjon som blir kalt når modalen har blitt åpnet. Kan brukes for å sette fokus på ett element
onRequestClose
() => void
-
Funksjon som blir kalt i det modalen ønsker å lukkes
shouldCloseOnOverlayClick
boolean
-
Om klikk på overlay skal lukke modalen