Modal

React API

Modal

• a11yOptions

  Saavutettavuusasetukset

  Tyyppi: ModalA11yOptions

  Oletusarvo: { inert: true }

• appRootId

  Koko sovelluksen sisältävän elementin id-attribuutti, jota käytetään taustan sumennukseen.

  Tyyppi: string

  Oletusarvo: ""

• backdropColor

  Dialogin ulkopuolelle jäävän alueen sumennuksen sävy.

  Tyyppi: "light" | "dark"

  Oletusarvo: light

• centered

  Keskittää dialogin pystysuunnassa

  Tyyppi: boolean

  Oletusarvo: false

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• closeLabel

  Aria-label sulje-painikkeelle.

  Tyyppi: string

  Oletusarvo: Sulje

• closeOnClickOutside

  Sulkee dialogin, kun käyttäjä klikkaa dialogin ulkopuolelta. Tämän estäminen estää myös sulkemisen ESC-näppäimellä.

  Tyyppi: boolean

  Oletusarvo: true

• focusRef

  Reactin ref, johon modal siirtää kohdistuksen. Kohdistus siirtyy ensimmäiseen kohdistettavaan elementtiin, jos tätä ei anneta.

  Tyyppi: RefObject<HTMLElement>

• icon

  Dialogin kuvake.

  Tyyppi: Element

• iconAriaLabel

  Ikonille välitettävä aria-label

  Tyyppi: string

• isOpen

  Määrittää onko dialogi auki vai kiinni.

  Tyyppi: boolean

  Oletusarvo: false

• onAfterClose

  Funktio, jota kutsutaan dialogin sulkeutuessa, kun sen tausta on siivottu pois DOM:sta, mutta ennen kuin kohdistus palautuu dialogin avanneeseen elementtiin. Mahdollistaa esimerkiksi oman kohdistuskäsittelyn yhdessä returnFocus-propin kanssa.

  Tyyppi: ({ reason, trigger }: { reason: ModalCloseReason; trigger: Element; }) => void

• onClose

  Funktio, joka sulkee dialogin, kun käyttäjä klikkaa dialogin ulkopuolelta, painaa ESC-näppäintä tai sulje-painiketta dialogin yläreunasta.

  Tyyppi: (e: KeyboardEvent<Element> | MouseEvent<Element, MouseEvent>, { reason }: { reason: ModalCloseReason; }) => void

• readContent

  Poistaa sisällön automaattisen lukemisen ruudunlukijoilta.

  Tyyppi: boolean

  Oletusarvo: true

• returnFocus

  Määrittää palautetaanko kohdistus dialogin avanneeseen elementtiin.

  Tyyppi: boolean

  Oletusarvo: true

• showClose

  Määrittää näytetäänkö sulje-painike.

  Tyyppi: boolean

• size

  Dialogin leveys

  Tyyppi: "sm" | "md" | "lg" | "xl"

  Oletusarvo: md

• testId

  Komponentin juurielementille data-testid-attribuuttiin välitettävä arvo testausta varten.

  Tyyppi: string

• toggle

  Poistuva

  Funktio, joka muuttaa isOpen-tilan, kun käyttäjä klikkaa dialogin ulkopuolelta tai painaa ESC-näppäintä. @deprecated Poistuu versiossa 17.0.0. Siirry käyttämään onClose-proppia.

  Tyyppi: (e: KeyboardEvent<Element> | MouseEvent<Element, MouseEvent>) => void

• variant

  Komponentin väri / tyyppi.

  Tyyppi: "primary" | "danger" | "success" | "light" | "dark"

  Oletusarvo: primary

ModalHeader

Ref-prop välitetään otsikon sisältävälle div-elementille.

• as

  Renderöitävä HTML-elementti

  Tyyppi: ElementType

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• ref

  Komponentin ref, joka tyypittyy renderöitävän HTML-elementin mukaan.

  Tyyppi: any

• testId

  Komponentin juurielementille data-testid-attribuuttiin välitettävä arvo testausta varten.

  Tyyppi: string

ModalContent

Ref-prop välitetään komponentin div-elementille.

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• ref

  Komponentin renderöimälle elementille välitettävä ref.

  Tyyppi: Ref<HTMLDivElement>

• testId

  Komponentin juurielementille data-testid-attribuuttiin välitettävä arvo testausta varten.

  Tyyppi: string

ModalFooter

Ref-prop välitetään komponentin div-elementille.

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• ref

  Komponentin renderöimälle elementille välitettävä ref.

  Tyyppi: Ref<HTMLDivElement>

• testId

  Komponentin juurielementille data-testid-attribuuttiin välitettävä arvo testausta varten.

  Tyyppi: string