ExpandButton
Med en ExpandButton kan vi presentere mye innhold på liten plass. Knappen kan brukes frittstående, og styre ekspandering av innhold som ikke er direkte under komponenten.
Noen ganger trenger vi å gi brukerne som ønsker det litt mer informasjon.
Denne komponenten skal ikke brukes i en liste under hverandre. Om du har flere seksjoner med innhold du vil at skal vises og skjules uavhengig av hverandre bruker du en Accordion.
Viktig informasjon bør alltid ligge synlig, ikke skjult bak en ExpandButton.
Knappen bør ha en tekst som beskriver hva som skjules. Om det er tydelig fra sammenhengen hva knappen er til, for eksempel ved ekspandering av en tabellrad, kan den skjules visuelt.
Varianter
Som hovedregel skal ekspanderingen av innhold skje i retning nedover. Et unntak er dersom du har innhold i en bunnmeny som skal ekspanderes oppover. I de tilfellene kan ExpandButton
brukes med pila pekende i retningen innholdet kommer til å ekspandere, altså motsatt retning av det vanlige.
Tilgjengelighet
Det er viktig å hjelpe skjermlesere med å forstå at det er en knapp som kommer til å påvirke annet innhold. Inspisér gjerne HTMLen som genereres av eksempelet og se hvilke attributter som settes, og hvilken verdi de har i åpen og lukket tilstand.
På selve knappen ser du sannsynligvis:
id
aria-expanded="false"
når lukket ogaria-expanded="true"
når åpen (styres avisExpanded
-propen)aria-controls
med en ID som peker på innholdet som styres av knappen
På innholdet som styres av knappen ser du sannsynligvis:
id
aria-labelledby
med en ID som peker tilbake på knappenrole="group"
hidden
hvis innholdet er skjult
ExpandSection
-komponenten håndterer alt dette, men den plasserer alltid innholdet som ekspanderes direkte under knappen. Om du trenger en annen layout må du bruke ExpandButton
direkte, og sørge for å teste med skjermleser.
React API
Her finner du en oversikt over props på komponentene i pakken.
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
aria-controls | Må settes dersom du ikke bruker CoreToggle. Verdien skal være IDen til innholdet du ekspanderer. | ingen | Ikke påkrevd | string | undefined |
id | Må settes dersom du ikke bruker CoreToggle. IDen her skal brukes som verdien til aria-labelledby på innholdet du ekspanderer. | ingen | Ikke påkrevd | string | undefined |
className | ingen | Ikke påkrevd | string | undefined | |
onClick | ingen | Ikke påkrevd | MouseEventHandler<HTMLButtonElement> | undefined | |
onKeyDown | ingen | Ikke påkrevd | KeyboardEventHandler<HTMLButtonElement> | undefined | |
isExpanded | Styrer retningen til pila, som animeres ved endring. Styrer også aria-expanded. | false | Ikke påkrevd | boolean | undefined |
expandDirection | down | Ikke påkrevd | ExpandDirection | undefined | |
forceCompact | false | Ikke påkrevd | boolean | undefined | |
hideLabel | Skjul knappeteksten visuelt. | false | Ikke påkrevd | boolean | undefined |
children | ingen | Påkrevd | ReactNode |
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
children | Innholdet som skal kunne ekspanderes og skjules. Om du ikke trenger at komponenten tar seg av visning og skjuling av innholdet skal du bruke `ExpandButton` direkte. Det sparer deg for å laste inn unødvendige avhengigheter. | ingen | Påkrevd | ReactNode |
title | ingen | Påkrevd | string | |
className | ingen | Ikke påkrevd | string | undefined | |
forceCompact | ingen | Ikke påkrevd | boolean | undefined | |
onClick | ingen | Ikke påkrevd | ((e: MouseEvent<HTMLButtonElement, MouseEvent>, isExpanded: boolean) => void) | undefined | |
expandButtonProps | ingen | Ikke påkrevd | Omit<ExpandButtonProps, "onClick" | "forceCompact" | "id" | "isExpanded" | "hideLabel"> | undefined | |
useAnimatedHeightOptions | ingen | Ikke påkrevd | UseAnimatedHeightOptions | undefined | |
isExpanded | Om du ønsker å styre komponenten utenfra | false | Ikke påkrevd | boolean | undefined |