Designsystemet Flutter

Utseende

DsChip ​

Kompakt element for filtrering eller valg med veksle-funksjonalitet.

Bruk ​

Når bør du bruke DsChip? ​

  • For filtrering av innhold, f.eks. å velge kategorier eller emner.
  • For valgbare alternativer som kan kombineres fritt.
  • For kompakte, interaktive merkelapper i verktøylinjer eller filterområder.

Når bør du unngå DsChip? ​

  • For rene visuelle merkelapper uten interaksjon — bruk DsTag i stedet.
  • For enkeltvalg mellom gjensidig utelukkende alternativer — bruk DsRadio.
  • For primærhandlinger — bruk DsButton.

Eksempler ​

Grunnleggende chip ​

DsChip — interaktiv forhåndsvisning
Åpne i nytt vindu ↗
dart
DsChip(
  selected: erValgt,
  onSelected: (valgt) => setState(() => erValgt = valgt),
  child: Text('Flutter'),
)

Filtergruppe ​

dart
Wrap(
  spacing: 8,
  children: [
    DsChip(
      selected: filtre.contains('dart'),
      onSelected: (v) => oppdaterFilter('dart', v),
      child: Text('Dart'),
    ),
    DsChip(
      selected: filtre.contains('flutter'),
      onSelected: (v) => oppdaterFilter('flutter', v),
      child: Text('Flutter'),
    ),
    DsChip(
      selected: filtre.contains('web'),
      onSelected: (v) => oppdaterFilter('web', v),
      child: Text('Web'),
    ),
  ],
)

Retningslinjer ​

  • Grupper relaterte chips visuelt med jevn avstand.
  • Bruk korte, beskrivende tekster i hver chip.
  • Vis tydelig forskjell mellom valgt og ikke-valgt tilstand.

Tekst ​

  • Bruk korte, konsise tekster som «Dart», «Flutter», «Mobil».
  • Unngå setninger eller lengre beskrivelser.

Har du innspill til denne komponenten? Send innspill på GitHub