mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
65 lines
No EOL
1.4 KiB
Text
65 lines
No EOL
1.4 KiB
Text
---
|
|
components: ["ContentSwitcher", "Switch"]
|
|
---
|
|
|
|
<script>
|
|
import { ContentSwitcher, Switch } from "carbon-components-svelte";
|
|
import Bullhorn from "carbon-icons-svelte/lib/Bullhorn.svelte";
|
|
import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
## Default
|
|
|
|
<ContentSwitcher>
|
|
<Switch text="Latest news" />
|
|
<Switch text="Trending" />
|
|
</ContentSwitcher>
|
|
|
|
## Initial selected index
|
|
|
|
<ContentSwitcher selectedIndex={1}>
|
|
<Switch text="Latest news" />
|
|
<Switch text="Trending" />
|
|
<Switch text="Recommended" />
|
|
</ContentSwitcher>
|
|
|
|
## Reactive example
|
|
|
|
<FileSource src="/framed/ContentSwitcher/ContentSwitcherReactive" />
|
|
|
|
## Custom switch slot
|
|
|
|
<ContentSwitcher>
|
|
<Switch>
|
|
<div style="display: flex; align-items: center;">
|
|
<Bullhorn style="margin-right: 0.5rem;" /> Latest news
|
|
</div>
|
|
</Switch>
|
|
<Switch>
|
|
<div style="display: flex; align-items: center;">
|
|
<Analytics style="margin-right: 0.5rem;" /> Trending
|
|
</div>
|
|
</Switch>
|
|
</ContentSwitcher>
|
|
|
|
## Extra-large size
|
|
|
|
<ContentSwitcher size="xl">
|
|
<Switch text="All" />
|
|
<Switch text="Archived" />
|
|
</ContentSwitcher>
|
|
|
|
## Small size
|
|
|
|
<ContentSwitcher size="sm">
|
|
<Switch text="All" />
|
|
<Switch text="Archived" />
|
|
</ContentSwitcher>
|
|
|
|
## Disabled
|
|
|
|
<ContentSwitcher>
|
|
<Switch disabled text="All" />
|
|
<Switch disabled text="Archived" />
|
|
</ContentSwitcher> |