mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
59 lines
No EOL
1.3 KiB
Text
59 lines
No EOL
1.3 KiB
Text
---
|
|
components: ["Toggle", "ToggleSkeleton"]
|
|
---
|
|
|
|
<script>
|
|
import { Toggle, ToggleSkeleton } from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
## Default (untoggled)
|
|
|
|
<Toggle labelText="Push notifications" />
|
|
|
|
## Toggled
|
|
|
|
<Toggle labelText="Push notifications" toggled />
|
|
|
|
## Reactive example
|
|
|
|
<FileSource src="/framed/Toggle/ToggleReactive" />
|
|
|
|
## on:toggle event
|
|
|
|
<Toggle labelText="Push notifications" on:toggle={e => console.log(e.detail)} />
|
|
|
|
## Hidden label text
|
|
|
|
Set `hideLabel` to `true` to visually hide the label text. It's recommended to still specify `labelText` for screen reader accessibility.
|
|
|
|
<Toggle labelText="Push notifications" hideLabel />
|
|
|
|
## Custom labels
|
|
|
|
<Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
|
|
|
|
## Slottable labels
|
|
|
|
An alternative to the "labelA" and "labelB" props is to use the corresponding named slots.
|
|
|
|
<Toggle labelText="Push notifications">
|
|
<span slot="labelA" style="color: red">No</span>
|
|
<span slot="labelB" style="color: green">Yes</span>
|
|
</Toggle>
|
|
|
|
## Disabled
|
|
|
|
<Toggle labelText="Push notifications" disabled />
|
|
|
|
## Small size
|
|
|
|
<Toggle size="sm" labelText="Push notifications" />
|
|
|
|
## Skeleton
|
|
|
|
<ToggleSkeleton />
|
|
|
|
## Skeleton (small)
|
|
|
|
<ToggleSkeleton size="sm" /> |