Designsystemet Flutter

Utseende

DsBreadcrumbs ​

Brødsmulesti som viser brukerens plassering i navigasjonshierarkiet.

Bruk ​

Når bør du bruke DsBreadcrumbs? ​

  • Når applikasjonen har et dypt navigasjonshierarki og brukeren trenger å orientere seg.
  • Når brukeren skal kunne navigere raskt tilbake til overordnede sider.
  • I kombinasjon med sidetittel for å gi full kontekst om brukerens plassering.

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

  • Når navigasjonshierarkiet er flatt (kun ett nivå). Bruk heller vanlig tilbakeknapp.
  • Når innholdet ikke har en logisk hierarkisk struktur.

Eksempler ​

Grunnleggende bruk ​

DsBreadcrumbs — interaktiv forhåndsvisning
Åpne i nytt vindu ↗
dart
DsBreadcrumbs(
  items: const ['Hjem', 'Produkter', 'Detaljer'],
  onItemTap: (index) {
    if (index == 0) gåTilHjem();
    if (index == 1) gåTilProdukter();
  },
)

Det siste elementet representerer automatisk gjeldende side og trenger derfor ingen egen håndtering.

Med egendefinert farge ​

dart
DsBreadcrumbs(
  items: const ['Hjem', 'Innstillinger'],
  color: DsColor.brand1,
  onItemTap: (index) {
    if (index == 0) gåTilHjem();
  },
)

Retningslinjer ​

  • Siste element i brødsmulestien skal representere gjeldende side.
  • Hold etikettene korte og konsise, bruk samme tittel som siden de peker til.
  • Inkluder alltid startsiden (f.eks. «Hjem») som første element.

Tekst ​

  • Bruk korte og beskrivende etiketter som samsvarer med sidens tittel.
  • Unngå forkortelser med mindre de er godt kjente.

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