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

docs(content-switcher): add reactive example

Browse source
This commit is contained in:
Eric Liu 2020-12-05 15:19:47 -08:00
commit d1565c5f75
2 changed files with 38 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

4
docs/src/pages/components/ContentSwitcher.svx
View file

@ -24,6 +24,10 @@ components: ["ContentSwitcher", "Switch"]
<Switch text="Recommended" /> <Switch text="Recommended" />
</ContentSwitcher> </ContentSwitcher>
### Reactive example
<FileSource src="/framed/ContentSwitcher/ContentSwitcherReactive" />
### Light variant ### Light variant
<ContentSwitcher light> <ContentSwitcher light>

34
docs/src/pages/framed/ContentSwitcher/ContentSwitcherReactive.svelte Normal file
View file

@ -0,0 +1,34 @@
<script>
import {
ContentSwitcher,
Switch,
ButtonSet,
Button,
} from "carbon-components-svelte";
let selectedIndex = 1;
</script>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>
<ContentSwitcher bind:selectedIndex>
<Switch text="Latest news" />
<Switch text="Trending" />
<Switch text="Recommended" />
</ContentSwitcher>
<div>
<Button
size="small"
disabled="{selectedIndex === 2}"
on:click="{() => (selectedIndex = 2)}"
>
Set selected to 2
</Button>
</div>
<div>Selected index: {selectedIndex}</div>