Gå til hovedinnhold
Entur logo – designsystemets starside
KOMPONENTER

Travel leg

npmv6.2.12

Travel leg benyttes til å illustrere reisestrekningen mellom to destinasjoner, og benytter transportfargen og Enturs mønster til det aktuelle transportmidlet.

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

TravelLeg-props

Direction

Komponenter

TravelLeg

import { TravelLeg } from '@entur/travel';
NavnTypeBeskrivelse
className?string

Ekstra klassenavn

transportTransport

Hviklen type reise som skal vises riktig farge og linjetype

direction"horizontal" | "vertical"

Retningen på komponenten

Ved å bruke TravelLeg istedet for LegLine og/eller LegBone, kan man enkelt få riktig farge ved å velge transportmodalitet. Disse tar også hensyn til om man er i en Kontrast-seksjon eller ikke.

LegBone

import { LegBone } from '@entur/travel';
NavnTypeDefault-verdiBeskrivelse
direction"horizontal" | "vertical"

Retning på komponenten

pattern"line" | "dashed" | "dotted" | "wave"

Hvilke linjemønster som skal brukes

color?string

Farge på linja

startColor?string Verdien til color

Farge på startpunktet

endColor?string Verdien til color

Farge på endepunktet

showStart?boolean true

Vis startpunkt

showLine?boolean true

Vis linke

showStop?boolean true

Vis endepunkt

className?string

Ekstra klassenavn

LegLine

import { LegLine } from '@entur/travel';
NavnTypeBeskrivelse
color?string

Farge på LegLine’n

direction"horizontal" | "vertical"

Retningen til LegLine

pattern"line" | "dashed" | "dotted" | "wave"

Hvilket linjemønster som skal brukes

className?string

Ekstra klassenavn

Retningslinjer for bruk

Travel leg benyttes oftest vertikalt, men kan også benyttes horisontalt i grensesnitt der dette passer bedre.

Eksempel

Her er et eksempel på hvordan man har tatt i bruk travel legs på reisedetaljer siden i reiseplanleggeren til Entur.

Skjermbilde av Entur-appen som illustrer bruk av travel leg
Skjermbilde av Entur-appen som illustrer bruk av travel leg
Rediger denne siden på GitHub