Modal

React API

Modal

• appRootId

  Koko sovelluksen sisältävän elementin id-attribuutti, sumentaa taustan.

  Tyyppi: string

  Oletusarvo: ""

• backdropColor

  Modaalin 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 Modalin 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. Jos tätä ei anneta kohdistus toimii oletustavalla.

  Tyyppi: RefObject<HTMLElement>

• icon

  Modaalin kuvake.

  Tyyppi: Element

• iconAriaLabel

  Ikonille välitettävä aria-label

  Tyyppi: string

• isOpen

  Auki / kiinni -tila.

  Tyyppi: boolean

  Oletusarvo: false

• readContent

  Poistaa sisällön automaattisen lukemisen (ruudunlukijat)

  Tyyppi: boolean

  Oletusarvo: true

• showClose

  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

  Funktio, joka muuttaa isOpen-tilan, kun käyttäjä klikkaa dialogin ulkopuolelta tai painaa ESC-näppäintä.

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

• variant

  Pakollinen

  Komponentin väri / tyyppi.

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

ModalHeader

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

• as

  Renderöitävä HTML-elementti

  Tyyppi: ElementType<any, keyof IntrinsicElements>

  Oletusarvo: "div" as E

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• ref

  Komponentin ref, 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 ref, tyypittyy renderöitävän HTML-elementin mukaan

  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 ref, tyypittyy renderöitävän HTML-elementin mukaan

  Tyyppi: Ref<HTMLDivElement>

• testId

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

  Tyyppi: string