Gå til hovedinnhold
KOMPONENTER

Overflow menu

npmv4.2.19

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

npm install @entur/menu
@import '@entur/menu/dist/styles.css';

Komponenter

OverflowMenu

import { OverflowMenu } from '@entur/menu';
NavnTypeDefault-verdiBeskrivelse
children?ReactNode

Menypunkter (OverflowMenuItem eller OverflowMenuLink) Accepts any renderable content. @see Docs https://reach.tech/menu-button#menubutton-children

button?ReactElement<any, string | JSXElementConstructor<any>> IconButton med VerticalDotsIcon

Knapp som skal åpne OverflowMenu

className?string

Ekstra klassenavn

position?"right" | "left" 'right'

Posisjoneringen av OverflowMenu-lista

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

import { OverflowMenuItem } from '@entur/menu';

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

import { OverflowMenuLink } from '@entur/menu';

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

Rediger denne siden på Bitbucket