Gå til hovedinnhold
KOMPONENTER

Overflow menu

Overflow menu består av en ikonknapp for meny som utløser en liste over handlinger når man klikker på den.


Komponenter

OverflowMenu

NavnTypePåkrevd?Default-verdiBeskrivelse
childrenReactNode

Menypunkter (OverflowMenuItem eller OverflowMenuLink)

buttonReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> IconButton med VerticalDotsIcon

Knapp som skal åpne OverflowMenu

classNamestring

Ekstra klassenavn

Denne komponenten støtter keyboard-events, som kan sees her: https://reacttraining.com/reach-ui/menu-button#keyboard-accessibility

Obs angående button-prop:

Generelt sett er dette en meny som skal ligge bak en IconButton med VerticalDotsIcon, men man også sende inn sin egen knapp om det skulle være ønskelig å endre denne. Denne knappen støtte en as prop for å riktig bli integrert inn i menyen. Alle knappene i designsystemet støtter denne propen

OverflowMenuItem

Denne komponenten har ingen props

Pass på bruk av onClick på denne (og OverflowMenuLink), da den eventen potensielt ikke vil skje i den rekkefølgen man forventer. Om du bruker ikoner, husk og wrap den i en tag som er aria-hidden. Les mer om det her: https://reacttraining.com/reach-ui/menu-button#events

Denne komponenten har ingen props

På grunn av den semantiske forskjellen mellom knapper og linker, så krever denne komponenten en split mellom en tradisjonell OverflowMenuItem og OverflowMenuLink.

Retningslinjer for bruk

Overflow menu består av en ikonknapp for meny som utløser en liste over handlinger når man klikker på den. Brukes for eksempel som en kontekstuell meny i en tabellrad der flere handlinger er tilgjengelig for brukeren. Teksten på menyelementer bør være kort og direkte slik at brukerne raskt kan bestemme seg for en handling. Ikoner kan også hjelpe brukeren å forstå konteksten raskere. Hvis du skal bruke ikoner i menyelementene, må disse være venstrejustert og oppleves relevant for de handlingene de brukes til. Avhengig av hvor den vises i brukergrensesnittet, kan en overflow menu vises i retning venstre eller høyre slik at den alltid er synlig for brukeren. En overflow menu bør ha minst 3 menyelementer. Hvis den ikke har det, vurder heller å vis handlingene ved å bruke Icon button.

Eksempler

NavnPublisertKategoriMottaker
Status rapport Vy15.04.2020TransaksjonssstatistikkVy Alle
Status rapport Vy10.03.2020TransaksjonssstatistikkVy Alle
Status rapport Vy02.02.2020TransaksjonssstatistikkVy Alle