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

docs(tabs): add reactive example

Browse source 
Closes #438
This commit is contained in:
Eric Liu 2021-02-05 05:36:06 -08:00
commit 38a34c53f9
2 changed files with 40 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -20,6 +20,10 @@ components: ["Tabs", "Tab", "TabContent", "TabsSkeleton"]
</div> </div>
</Tabs> </Tabs>
### Reactive example
<FileSource src="/framed/Tabs/TabsReactive" />
### Container type ### Container type
<Tabs type="container"> <Tabs type="container">

36
docs/src/pages/framed/Tabs/TabsReactive.svelte Normal file
View file

@ -0,0 +1,36 @@
<script>
import { Tabs, Tab, TabContent, Button } from "carbon-components-svelte";
let selected = 0;
</script>
<Tabs bind:selected>
<Tab label="Tab label 1" />
<Tab label="Tab label 2" />
<Tab label="Tab label 3" />
<div slot="content">
<TabContent>Content 1</TabContent>
<TabContent>Content 2</TabContent>
<TabContent>Content 3</TabContent>
</div>
</Tabs>
<div>
<h4>Selected index: {selected}</h4>
</div>
<div>
<Button
size="small"
disabled="{selected === 1}"
on:click="{() => (selected = 1)}"
>
Set index to 1
</Button>
</div>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>