Route Description
5.0.2
Route Description används för att visa information om en resa.
| Namn | Typ | Beskrivning |
|---|---|---|
activeLeg | number | For 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 | number | For 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 | boolean | If true, a loading skeleton will be rendered instead of the component. |
isStriped | boolean | Every 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 | boolean | If true, the time (arrival/departure) will be rendered to the left of the path graphic. |
skeletonProps | RouteDescriptionSkeletonProps | Props to pass to the RouteDescriptionSkeleton component when isLoading is true. |
npm install @sj-ab/component-library.ui.route-descriptionData som definierar listan med hållplatser i Route Description skickas in genom items, som består av en lista av typen RouteDescriptionItemProps.
Vi rekommenderar att du som vill implementera Route Description-komponenten tittar igenom dokumentationen för RouteDescriptionItemProps.
Lägg särskilt märke till egenskapen pathDefinition som definiearar markörlinjen som visas innan och efter en hållplats.
Route Description presenteras som en ordnad lista:
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å.
"Utvecklare ansvarar för att skicka med en giltig translation-prop med de översättningar som ska användas i skärmläsartexten
Importer av Route Description
Repos med Route Description
Senaste installerade version av Route Description
Äldsta installerade version av Route Description
<ol>
<li>
<!-- Information om ett stopp på resan -->
</li>
<li>
<!-- Information om ett annat stopp på resan -->
</li>
</ol>