• Start
  • Blogg
  • Kom igång
  • Riktlinjer
  • Komponenter
  • Changelog
  • Tillgänglighet
  • Statistik
  • Inställningar

Komponenter

Komponenter

​
​

Inga resultat hittade, prova med andra sökvillkor.

Route Description

Route Description

5.0.2

Route Description används för att visa information om en resa.

Demo
Props
Installation
Länkar
Best practices
Tillgänglighet
Change log
Statistik

Demo

Props

Se fullständing dokumentation(öppnas i ny flik)
NamnTypBeskrivning

activeLeg

numberFor showing route progression. This indicates which leg of the journey is currently active. This should be a number between 0 and the length of the items array. _Optional_.

activeLegProgress

numberFor showing route progression. This indicates how far along the current leg of the journey is. This should be a number between 0 and 1, where 0 is the start of the leg and 1 is the end of the leg. Should be used in conjunction with activeLeg. _Optional_.

hiddenColumns

AvailableColumns[]Hidden columns in the route description. This is an array of strings that correspond to the data attributes of the columns to hide. Default is an empty array, meaning no columns are hidden. __WARNING!__ This should only be used if you really know that some of the data points will never be shown. It should __NOT__ be used to force a certain kind of layout.

isLoading

booleanIf true, a loading skeleton will be rendered instead of the component.

isStriped

booleanEvery other route item will be shaded if this is set to true. Default is false.

items *

RouteDescriptionItemProps[]List of items in the route description. This is the "meat and bones" of the route description component. Each item consist of the following parameters.

lang

"sv" | "en"Language used for internal translations.

promoteTime

booleanIf true, the time (arrival/departure) will be rendered to the left of the path graphic.

skeletonProps

RouteDescriptionSkeletonPropsProps to pass to the RouteDescriptionSkeleton component when isLoading is true.

Installation

Kodexempel
npm install @sj-ab/component-library.ui.route-description

Länkar

  • Storybook

  • Figma

  • Bit.cloud

Best practices

Tillgänglighet

Semantik

Route Description presenteras som en WAI-ARIA-lista:

Kodexempel

Tillgängligt namn

Varje Route Description Item har en anpassad uppläsning för skärmläsare. All synlig text och alla ikoner döljs med aria-hidden="true" och ersätts av en visuellt dold text.

Informationen i skärmläsartexten ska vara helt likvärdig den synliga informationen, men med förklarande ord och skiljetecken för att den ska bli lättare att förstå.

  • "18:40 Göteborg Central" blir till "Tåget avgår klockan 19:40 från Göteborg Central"
  • "22:48 Malmö C" blir till "Tåget ankommer klockan 22:48 till Malmö Central"

Utvecklare ansvarar för att skicka med en giltig translation-prop med de översättningar som ska användas i skärmläsartexten

Change log

  • Fixes lang not being passed to summary component in RouteDescription.

    5.0.2
  • Update to MUI 7

    5.0.0

    Breaking

  • Adds the ability to supply duration and placement props to transportDetails.

    4.0.4
  • Removes conditional props from RouteDescription

    4.0.2
  • Route Description

    4.0.0

    Breaking

Statistik

  • Importer av Route Description

    7
  • Repos med Route Description

    19%
  • Senaste installerade version av Route Description

    4.0.4
  • Äldsta installerade version av Route Description

    3.1.4