mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 10:51:06 +00:00
98 lines
No EOL
3 KiB
Text
98 lines
No EOL
3 KiB
Text
---
|
|
components: ["TimePicker", "TimePickerSelect", "SelectItem"]
|
|
---
|
|
|
|
<script>
|
|
import { TimePicker, TimePickerSelect, SelectItem } from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</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
|
|
|
|
<TimePicker labelText="Cron job" placeholder="hh:mm">
|
|
<TimePickerSelect value="pm">
|
|
<SelectItem value="am" text="AM" />
|
|
<SelectItem value="pm" text="PM" />
|
|
</TimePickerSelect>
|
|
<TimePickerSelect value="pdt">
|
|
<SelectItem value="pdt" text="PDT" />
|
|
<SelectItem value="gmt" text="GMT" />
|
|
</TimePickerSelect>
|
|
</TimePicker>
|
|
|
|
## Light variant
|
|
|
|
Use the light variant for light-themed backgrounds by setting `light` to `true`.
|
|
|
|
<TimePicker light labelText="Cron job" placeholder="hh:mm">
|
|
<TimePickerSelect value="pm">
|
|
<SelectItem value="am" text="AM" />
|
|
<SelectItem value="pm" text="PM" />
|
|
</TimePickerSelect>
|
|
<TimePickerSelect value="pdt">
|
|
<SelectItem value="pdt" text="PDT" />
|
|
<SelectItem value="gmt" text="GMT" />
|
|
</TimePickerSelect>
|
|
</TimePicker>
|
|
|
|
## 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">
|
|
<TimePickerSelect value="pm">
|
|
<SelectItem value="am" text="AM" />
|
|
<SelectItem value="pm" text="PM" />
|
|
</TimePickerSelect>
|
|
<TimePickerSelect value="pdt">
|
|
<SelectItem value="pdt" text="PDT" />
|
|
<SelectItem value="gmt" text="GMT" />
|
|
</TimePickerSelect>
|
|
</TimePicker>
|
|
|
|
## 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">
|
|
<TimePickerSelect value="pm">
|
|
<SelectItem value="am" text="AM" />
|
|
<SelectItem value="pm" text="PM" />
|
|
</TimePickerSelect>
|
|
<TimePickerSelect value="pdt">
|
|
<SelectItem value="pdt" text="PDT" />
|
|
<SelectItem value="gmt" text="GMT" />
|
|
</TimePickerSelect>
|
|
</TimePicker>
|
|
|
|
## 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">
|
|
<TimePickerSelect value="pm">
|
|
<SelectItem value="am" text="AM" />
|
|
<SelectItem value="pm" text="PM" />
|
|
</TimePickerSelect>
|
|
<TimePickerSelect value="pdt">
|
|
<SelectItem value="pdt" text="PDT" />
|
|
<SelectItem value="gmt" text="GMT" />
|
|
</TimePickerSelect>
|
|
</TimePicker>
|
|
|
|
## Disabled state
|
|
|
|
Disable the time picker to prevent user interaction by setting `disabled` to `true`.
|
|
|
|
<TimePicker labelText="Cron job" placeholder="hh:mm" disabled>
|
|
<TimePickerSelect value="pm" disabled>
|
|
<SelectItem value="am" text="AM" />
|
|
<SelectItem value="pm" text="PM" />
|
|
</TimePickerSelect>
|
|
<TimePickerSelect value="pdt" disabled>
|
|
<SelectItem value="pdt" text="PDT" />
|
|
<SelectItem value="gmt" text="GMT" />
|
|
</TimePickerSelect>
|
|
</TimePicker> |