Dropdown

React API

Dropdown

• a11yHideSelectors

  Ylimääräiset HTML-elementit, jotka piilotetaan ruudunlukijalta, kun valikko avataan. Arvona toimii lista mistä tahansa JS-selektoreista.

  Tyyppi: string[]

  Oletusarvo: []

• as

  Renderöitävä HTML-elementti

  Tyyppi: ElementType

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• isOpen

  Pakollinen

  Auki / kiinni tila

  Tyyppi: boolean

• onClick

  Pakollinen

  Komponentin onClick-funktio

  Tyyppi: (event: TouchEvent | MouseEvent | KeyboardEvent<HTMLElement> | React.MouseEvent<...> | React.TouchEvent<...> | FocusEvent<...>) => void

• placement

  Pudotusvalikon (karkea) sijainti

  Tyyppi: "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"

  Oletusarvo: bottom-start

• testId

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

  Tyyppi: string

• usePortal

  Renderöi komponentin valikon portalin avulla. Estää komponentin valikon leikkautumisen jos parent-elementin overflow on piilotettu esim. taulukoissa.

  Tyyppi: boolean

DropdownToggle

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

• as

  Renderöitävä HTML-elementti

  Tyyppi: ElementType

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• ref

  Tyyppi: Ref<HTMLButtonElement>

• testId

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

  Tyyppi: string

DropdownMenu

• allowFullWidth

  Salli valikon venyä leveydeltään sisällön mukaan (oletuksena valikolle annetaan maksimileveydeksi 20rem)

  Tyyppi: boolean

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• testId

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

  Tyyppi: string

DropdownMenuGroupHeading

• as

  Renderöitävä HTML-elementti

  Tyyppi: ElementType

  Oletusarvo: "h3" as E

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• testId

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

  Tyyppi: string

DropdownMenuGroup

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• testId

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

  Tyyppi: string

DropdownMenuItem

• active

  Aktiivisen valinnan visuaalinen korostus

  Tyyppi: boolean

  Oletusarvo: false

• as

  Renderöitävä HTML-elementti

  Tyyppi: ElementType

  Oletusarvo: "a" as E

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• disabled

  Estetty (disabloitu) linkki / painike

  Tyyppi: boolean

  Oletusarvo: false

• divider

  Renderöi erotinviivan

  Tyyppi: boolean

  Oletusarvo: false

• heading

  Renderöi väliotsikon

  Tyyppi: boolean

  Oletusarvo: false

• href

  Linkki

  Tyyppi: string

• iconAfter

  Kuvake, painikkeen tekstin jälkeen

  Tyyppi: Element

• iconBefore

  Kuvake, ennen painikkeen/linkin tekstiä

  Tyyppi: Element

• testId

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

  Tyyppi: string

• variant

  Tyyppi / väri

  Tyyppi: "danger"