mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(time-picker): improve docs

Browse source
This commit is contained in:
Eric Liu 2025-05-03 11:02:58 -07:00
commit 111b212538
1 changed files with 12 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

13
docs/src/pages/components/TimePicker.svx
View file

@ -7,6 +7,8 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
`TimePicker` provides a time input field with optional period (AM/PM) and timezone selectors. It supports various sizes, states, and themes to match your application's design system.
## Default ## Default
<TimePicker labelText="Cron job" placeholder="hh:mm"> <TimePicker labelText="Cron job" placeholder="hh:mm">
@ -22,6 +24,8 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
## Light variant ## Light variant
Use the light variant for light-themed backgrounds by setting `light` to `true`.
<TimePicker light labelText="Cron job" placeholder="hh:mm"> <TimePicker light labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="pm"> <TimePickerSelect value="pm">
<SelectItem value="am" text="AM" /> <SelectItem value="am" text="AM" />
@ -35,6 +39,8 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
## Extra-large size ## Extra-large size
Use the extra-large size for more prominent time pickers by setting `size` to `"xl"`.
<TimePicker size="xl" labelText="Cron job" placeholder="hh:mm"> <TimePicker size="xl" labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="pm"> <TimePickerSelect value="pm">
<SelectItem value="am" text="AM" /> <SelectItem value="am" text="AM" />
@ -48,6 +54,8 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
## Small size ## Small size
Use the small size for more compact time pickers by setting `size` to `"sm"`.
<TimePicker size="sm" labelText="Cron job" placeholder="hh:mm"> <TimePicker size="sm" labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="pm"> <TimePickerSelect value="pm">
<SelectItem value="am" text="AM" /> <SelectItem value="am" text="AM" />
@ -61,6 +69,8 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
## Invalid state ## Invalid state
Indicate an invalid state with an error message by setting `invalid` to `true` and providing `invalidText`.
<TimePicker invalid invalidText="A valid value is required" labelText="Cron job" placeholder="hh:mm"> <TimePicker invalid invalidText="A valid value is required" labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="pm"> <TimePickerSelect value="pm">
<SelectItem value="am" text="AM" /> <SelectItem value="am" text="AM" />
@ -72,9 +82,10 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
</TimePickerSelect> </TimePickerSelect>
</TimePicker> </TimePicker>
## Disabled state ## Disabled state
Disable the time picker to prevent user interaction by setting `disabled` to `true`.
<TimePicker labelText="Cron job" placeholder="hh:mm" disabled> <TimePicker labelText="Cron job" placeholder="hh:mm" disabled>
<TimePickerSelect value="pm" disabled> <TimePickerSelect value="pm" disabled>
<SelectItem value="am" text="AM" /> <SelectItem value="am" text="AM" />