Siirry sisältöön

14.5.0

Modal

Komponentit modaalisten dialogien toteutukseen. Modal pakottaa käyttäjän pysähtymään ja valitsemaan jonkin tarjotuista toiminnoista.

Julkaistu versiossa 0.15.3

API

  • appRootId

    Tyyppi: string

    Oletusarvo: ""

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

  • backdropColor

    Tyyppi: "light" | "dark"

    Oletusarvo: light

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

  • centered

    Tyyppi: boolean

    Oletusarvo: false

    Keskittää dialogin pystysuunnassa

  • children

    Tyyppi: ReactNode

    Komponentin sisältö

  • className

    Tyyppi: string

    Utility-luokat ulkoasun muokkaamiseen

  • closeLabel

    Tyyppi: string

    Oletusarvo: Sulje

    Aria-label sulje-painikkeelle.

  • closeOnClickOutside

    Tyyppi: boolean

    Oletusarvo: true

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

  • focusRef

    Tyyppi: RefObject<HTMLElement>

    Reactin ref johon modal siirtää kohdistuksen. Jos tätä ei anneta kohdistus toimii oletustavalla.

  • icon

    Tyyppi: Element

    Modaalin kuvake.

  • iconAriaLabel

    Tyyppi: string

    Ikonille välitettävä aria-label

  • isOpen

    Tyyppi: boolean

    Oletusarvo: false

    Auki / kiinni -tila.

  • readContent

    Tyyppi: boolean

    Oletusarvo: true

    Poistaa sisällön automaattisen lukemisen (ruudunlukijat)

  • showClose

    Tyyppi: boolean

    Näytetäänkö sulje-painike.

  • size

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

    Oletusarvo: md

    Dialogin leveys

  • testId

    Tyyppi: string

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

  • toggle

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

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

  • util

    Poistuva

    Tyyppi: string

    Utility-luokat ulkoasun muokkaamiseen @deprecated Poistuu käytöstä versiossa 15.0.0. Käytä className-proppia.

  • variant

    Pakollinen

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

    Komponentin väri / tyyppi.

ModalHeader

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

  • as

    Tyyppi: ElementType<any, keyof IntrinsicElements>

    Oletusarvo: "div" as E

    Renderöitävä HTML-elementti

  • children

    Tyyppi: ReactNode

    Komponentin sisältö

  • className

    Tyyppi: string

    Utility-luokat ulkoasun muokkaamiseen

  • ref

    Tyyppi: any

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

  • testId

    Tyyppi: string

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

  • util

    Poistuva

    Tyyppi: string

    Utility-luokat ulkoasun muokkaamiseen @deprecated Poistuu käytöstä versiossa 15.0.0. Käytä className-proppia.

ModalContent

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

  • children

    Tyyppi: ReactNode

    Komponentin sisältö

  • className

    Tyyppi: string

    Utility-luokat ulkoasun muokkaamiseen

  • ref

    Tyyppi: Ref<HTMLDivElement>

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

  • testId

    Tyyppi: string

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

  • util

    Poistuva

    Tyyppi: string

    Utility-luokat ulkoasun muokkaamiseen @deprecated Poistuu käytöstä versiossa 15.0.0. Käytä className-proppia.

ModalFooter

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

  • children

    Tyyppi: ReactNode

    Komponentin sisältö

  • className

    Tyyppi: string

    Utility-luokat ulkoasun muokkaamiseen

  • ref

    Tyyppi: Ref<HTMLDivElement>

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

  • testId

    Tyyppi: string

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

  • util

    Poistuva

    Tyyppi: string

    Utility-luokat ulkoasun muokkaamiseen @deprecated Poistuu käytöstä versiossa 15.0.0. Käytä className-proppia.