Time Picker
0.4.5
The Time Picker is a text field enhanced by a panel that lets the user select a single time.
| Namn | Typ | Beskrivning |
|---|---|---|
customTranslations | TimePickerTranslation | Optional. Used to provide custom translation strings to the component. |
disabled | boolean | Optional. If true, the component will not be interactive. |
errorMessage | string | Optional. Text to be shown when an error has occurred. |
fullWidth | boolean | Optional. If true, the component will take up the full width of its container. |
helperText | string | Optional. Text showing underneath the component. |
isLoading | boolean | Optional. If true, a loading skeleton will be rendered instead of the component. |
label | string | Optional. Label for the component. |
lang | "sv" |
"en" | Optional. Set the language used for the component’s translation strings. Default is "sv". |
readOnly | boolean | Optional. If true, the component will be read-only. |
sheetSupportingText | string | Optional. Supporting text showing under the title of the sheet in mobile views. |
sheetTitle | string | Optional. Title showing at the top of the sheet in mobile views. |
timeSteps | TimeStepOptions | The time steps between two time unit options.
For example, if timeStep.minutes = 8, then the available minute options will be [0, 8, 16, 24, 32, 40, 48, 56].
When single column time renderer is used, only timeStep.minutes will be used.
@default{ hours: 1, minutes: 1, seconds: 5 } |
npm install @sj-ab/component-library.ui.time-pickerAdaptive design
Semantik
Time Picker presenteras som ett inmatningsfält <input type="text"> med en knapp som öppnar en väljare i en popup.
På desktop kan användaren kan välja om de vill skriva in en tid i inmatningsfältet eller genom väljaren. På mobil visas enbart väljaren.
WAI-ARIA
Väljaren använder bland annat rollerna:
role="dialog"för väljarens dialogrutarole="listbox"för listorna med minuter respektive timmarrole="option"för varje alternativaria-labelför att sätta unika namn på listorna och på dialogrutan
Kända brister med tangentbord
Väljaren som visas i popup har i nuläget vissa brister kring tangentbordsstyrning. Användaren kan inte växla mellan timmar och minuter med pil höger och vänster.