OverlayNav

React API

OverlayNav

• as

  Renderöitävä HTML-elementti

  Tyyppi: ElementType

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• focusOutRef

  Elementti, johon kohdistetaan kohdistuksen poistuessa auki olevasta valikosta, jos valikkoelementti itse saa kohdistuksen. Tarpeellinen vain, jos kohdistus ei automaattisesti siirry oikeaan elementtiin (valikkoa edeltävä elementti).

  Tyyppi: RefObject<HTMLElement>

• hiddenBodyElements

  Määrittää ne HTML-elementit, jotka piilotetaan, kun valikko avataan (käytetään valikon korkeuden rajoittamiseen).

  Tyyppi: HTMLElement[]

  Oletusarvo: []

• insideElements

  Määrittää ne HTML-elementit, joihin valikon lisäksi pääsee kohdistamaan, kun valikko on auki. Esimerkiksi header-elementti.

  Tyyppi: HTMLElement[]

  Oletusarvo: []

• isOpen

  Pakollinen

  Määrittää, onko navigaatiovalikko avattu vai suljettu.

  Tyyppi: boolean

• isOverlay

  Määrittää, näytetäänkö navigaatiovalikko sisällön päällä vai työntääkö se sisältöä alaspäin. Poistaa myös kohdistuksen hallinnan käytöstä.

  Tyyppi: boolean

  Oletusarvo: true

• offset

  Määrittää navigaatiovalikon sijainnin sivulla. Toistaiseksi tuettuna on vain etäisyys yläreunasta.

  Tyyppi: { top: string; }

• onClose

  Funktio, jota kutsutaan navigaatiovalikon sulkeutuessa (esc, valikon ulkopuolinen klikkaus).

  Tyyppi: (e: KeyboardEvent | MouseEvent | TouchEvent) => void

• ref

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

  Tyyppi: any

• shouldCloseOnEsc

  Määrittää, sulkeutuuko navigaatiovalikko esc-painikkeella.

  Tyyppi: boolean

  Oletusarvo: true

• shouldCloseOnOutsideClick

  Määrittää, sulkeutuuko navigaatiovalikko, kun klikataan elementtiä sen ulkopuolella. Tarpeellinen vain, jos valikko ei täytä koko ruutua.

  Tyyppi: boolean

  Oletusarvo: false

• shouldPreventPageScroll

  Määrittää, estetäänkö taustalla olevan sivun vieritys valikon ollessa auki.

  Tyyppi: boolean

  Oletusarvo: false

• shouldScrollOnOpen

  Määrittää, vieritetäänkö ruutua siten, että valikon avannut elementti vieritetään kokonaan näkyville.

  Tyyppi: boolean

  Oletusarvo: true

• shouldUseBackdrop

  Määrittää, käytetäänkö valikon taustalla backdrop-elementtiä, joka peittää sisällön.

  Tyyppi: boolean

  Oletusarvo: true

• testId

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

  Tyyppi: string

• triggerRef

  Navigaatiovalikon avauspainikkeen Ref-objekti (tarvitaan jos shouldScrollOnOpen=true).

  Tyyppi: RefObject<HTMLElement>

• usePortal

  Määrittää, käytetäänkö navigaatiovalikon renderöimiseen Portal-komponenttia, joka siirtää navigaation DOM-rakenteessa sivun loppuun.

  Tyyppi: boolean

  Oletusarvo: true