Gå til hovedinnhold
KOMPONENTER

Chips

npmv0.3.39

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

Velg setekategori
Buss

Komponenter

ActionChip

Denne komponenten har ingen props

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

Denne komponenten har ingen props

ChoiceChip og ChoiceChipGroup er alternativer for vanlige radioknapper.

ChoiceChipGroup

NavnTypePåkrevd?Beskrivelse
namestring

Navnet til ChoiceChipsGroup

valuestring

Verdien til den valgte ChoiceChipen

childrenReactNode

ChoiceChip-komponentene sendes inn som children

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

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

TagChip

NavnTypePåkrevd?Beskrivelse
childrenReactNode

Teksten som vises i TagChip

classNamestring

Ekstra klassenavn

onClose() => void

Callback for når man klikker på krysset

FilterChip

Denne komponenten har ingen props

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