Station Picker
4.2.22
The Station Picker is a text field enhanced by a panel of suggested stations. The value must be chosen from a predefined set of allowed stations.
| Namn | Typ | Beskrivning |
|---|---|---|
ariaLabel | string | Aria label attribute for enhanced accessibility. |
autoSelectionValue | string | Preselects a station in the autocomplete if it matches this value. |
children | React.ReactNode | The children of the station picker. |
customAttribute | { attribute: string; value: string |
number } | Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
customTranslations | DeepPartial | Custom translations for the station picker. |
debugRenderNumStations | number | Number of stations to render in the autocomplete drawer for debugging purposes. |
disabled | boolean | If true, the component is disabled. |
errorMessage * | string | The error message to display. |
id * | string | The id of the station picker. |
inputRef * | React.RefObject | Reference to the input (text field) element |
isLoading | boolean | If true, a loading skeleton will be rendered instead of the component. |
label | string | The label text. |
lang | "en" |
"sv" | Language used for internal translations. |
onBlur | (event: React.FocusEvent) => void | Function called when the input field loses focus. |
onChange * | (item: SelectedItemProps) => void | Function called on text field input change. |
onSelect | (item: SelectedItemProps) => void | Function called when a station option is selected. |
onStationsSwapped | () => void | Function called when the station swap button is clicked. |
placeholder * | string | Placeholder text for the input field. |
showStationNumber | boolean | Whether to show station numbers alongside station names. |
showStationsNearMe | boolean | Whether to show nearby stations based on user's location. |
stations | StationProps[] | Sorted stations list to select between. Fetch this stations prio index list in your app to sort with: Existing: https://www.sj.se/content/dam/design-material/kb/stations-prio-index-existing.json Fagus: https://www.sj.se/content/dam/design-material/kb/stations-prio-index-fagus.json |
swapIcon | React.FC | The icon to show if onStationsSwapped is true |
titleComponent | "h1" |
"h2" |
"h3" |
"h4" |
"h5" |
"h6" | Semantic heading level for sections like 'popular stations' or 'stations near me'. |
transitionType | "slide" |
"fade" | Type of animation for opening and closing the mobile drawer. |
useInlineSwapIcon | boolean | Displays the swap icon inline when set to true. |
value * | string | Current value of the search input. |
npm install @sj-ab/component-library.ui.station-pickerResponsivitet
Station Picker har olika beteende på stora respektive små skärmar:
Små skärmar
På små skärmar är "Från" respektive "Till" knappar som öppnar stationsväljaren i en helskärmsmodal.
Användaren trycker på knappen, söker efter sin station i textfältet inne i modalen, och flyttas sedan tillbaka till knappen när valet är gjort. Detta skapar ett tydligare flöde där användaren kan fokusera på en uppgift i taget.
Station Picker består av två knappar...
...som öppnar väljaren i en helskärmsmodal
Stora skärmar
På stora skärmar är "Från" och "Till" två textfält med automatiska sökförslag. När användaren börjar skriva ett stationsnamn visas förslag i en popup nedanför fältet. Användaren kan klicka på ett förslag med musen eller aktivera det med tangentbordet.
Station picker på stora skärmar.
Elevation
Resting header (default)
Elevated header (when content scrolls behind it)
Adaptive design
Full-Screen (Mobile), Popper (Tablet & Desktop) and Sheet (all breakpoints).
Station Picker bygger vidare på Autocomplete.
Stavningsförslag
Station Picker har inbyggda stavningsförslag för att hjälpa användare med skrivsvårigheter. Om användaren skriver in ett stationsnamn som inte finns ges istället förslag på liknande stationer.
Förslag på stationer som användaren kanske menade.
Stavningsförslagen är implementerade med en algoritm baserad på Levenshteinavstånd, som jämför användarens sökning med kända stationsnamn.
- Pil nedGå till nästa sökförslag
- Pil uppGå till föregående sökförslag
- ReturVälj markerat sökförslag
- EscapeStäng panelen med förslag
Importer av Station Picker
Repos med Station Picker
Senaste installerade version av Station Picker
Äldsta installerade version av Station Picker