Gå til hovedinnhold
KOMPONENTER

Chips

npmv0.6.70

Chips er små avrundede knapper som eksisterer i ulike typer; Action chips og Choice chips (med eller uten ikon), samt Filter chips og tags.

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

Komponenter

ActionChip

import { ActionChip } from '@entur/chip';
NavnTypeDefault-verdiBeskrivelse
children?ReactNode

Teksten som vises i ActionChip

className?string

Ekstra klassenavn

loading?boolean false

Om chip-en er opptatt, f.eks med å oppdatere informasjon

ActionChip brukes på steder hvor man skal gjøre en handling som ikke krever like mye oppmerksomhet som vanlige knapper gir. Alternativt kan man bruke tertiærknapp.

ChoiceChip

import { ChoiceChip } from '@entur/chip';
NavnTypeDefault-verdiBeskrivelse
children?ReactNode

Label til ChoiceChip

className?string

Ekstra klassenavn

disabled?boolean false

Om Choicechip er deaktivert eller ikke

valuestring

Verdien til ChoiceChip

ChoiceChip og ChoiceChipGroup er alternativer for vanlige radioknapper.

ChoiceChipGroup

import { ChoiceChipGroup } from '@entur/chip';
NavnTypeBeskrivelse
namestring

Navnet til ChoiceChipsGroup

valuestring | null

Verdien til den valgte ChoiceChipen

children?ReactNode

ChoiceChip-komponentene sendes inn som children

onChange(e: ChangeEvent<HTMLInputElement>) => void

En callback som blir kalles hver gang en ChoiceChip klikkes på

label?ReactNode

Labelen til ChoiceChip-gruppen.

TagChip

import { TagChip } from '@entur/chip';
NavnTypeBeskrivelse
childrenReactNode

Teksten som vises i TagChip

className?string

Ekstra klassenavn

onClose() => void

Callback for når man klikker på krysset

closeButtonAriaLabel?string

Skjermlesertekst for X-knappen

FilterChip

import { FilterChip } from '@entur/chip';
NavnTypeBeskrivelse
className?string

Ekstra klassenavn

children?ReactNode

Label til FilterChip

value?string | (string & readonly string[])

Verdien til FilterChip

Retningslinjer for bruk

Action chips

Disse oppfører seg som handlingsknapper som skal brukes når handlingen(e) er direkte knyttet/relatert til hovedinnholdet. Det er oftest flere handlinger, f.eks. ‘Endre’, ‘Slett’, ‘Kjøp på nytt’ osv. men i tabeller kan også action chips benyttes alene. Siden Action chips aktiverer en handling, er ingen av dem forhåndsvalgt. Hvis man kun hr én action kan man alternativt benytte Tertiærknapp. Action chip kan ikke være inaktiv, hvis innholdet mangler må man allikevel navigere til ønsket side/funksjon, og vise en melding om hvorfor dette ikke er tilgjengelig.

Choice chips

Disse skal benyttes for å tilby et valg mellom flere ulike opsjoner. De er ofte direkte knyttet til info som vises ovenfor i flaten (f.eks en reiserute i kart eller en billettkategori), og viser også ofte mer info/forklaring knyttet til valgt Choice chip under raden med chips. Funksjonen er samme som i radio buttons, én verdi er forhåndsvalgt og man kan velge én av de andre. Inaktive Choice chips kan kun benyttes hvis man vil vise noe som vanligvis er tilgjengelig, men akkurat nå ikke er det, f.eks. hvis et setevalg er utsolgt. Årsaken til at et valg ikke er tilgjengelig må alltid beskrives på knappen, og inaktivt design skal være godt lesbart og ikke tonet ned.

Filter chips

Selector chips benyttes til forhåndsdefinerte valg, f.eks. mellom aktuelle kategorier. De tilbyr tydelig avgrensede alternativer i et kompakt område. De er et godt alternativ toggle-knapper eller checkboxes.

Funksjonelt er dette checkboxer; ingen er valgt by default, og det er mulig å velge flere eller ingen. Nytt design med tom/full check, som tydeligere indikerer at det å trykke på chip’en er et mulig valg er underveis.

Tag chips

Filter chips dukker opp når de aktiveres, og kan deaktiveres med krysset på selve taggen, eller ved å ‘huke vekk’ valget inne i en meny. De kan organiseres i en horisontalt på rekke og rad, tilnyttet flere søkefelter. Samme design benyttes også til å vise valg i dropdown med multiple choice-funksjon. Man kan velge om man vil vise tags utenfor eller inne i søkefeltet/søkefeltene.

Rediger denne siden på Bitbucket