mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 03:26:36 +00:00
32edfa59dd* feat(toggle): support slottable labels * yarn build:lib * docs(toggle): add "Slottable labels" example
53 lines
No EOL
1.1 KiB
Text
53 lines
No EOL
1.1 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)} />
|
|
|
|
### 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" /> |