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

docs(tabs): add better examples

Browse source
This commit is contained in:
Eric Liu 2020-11-30 12:13:27 -08:00
commit 72b5851efc
4 changed files with 120 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -33,13 +33,19 @@ components: ["Tabs", "Tab", "TabContent", "TabsSkeleton"]
</div>
</Tabs>
### Reactive example
Use the `selected` prop to bind the current tab index.
<FileSource src="/framed/Tabs/TabsReactive" />
### Re-rendering tabs
In the example below, tabs are rendered using the `#each` block. However, the Tabs component can lose track of the current index if the number of rendered tabs changes.
Use the [`#key` block](https://svelte.dev/docs#key) to dynamically update tab items or content.
The example below shows tabs and the bound `selected` index being programmatically updated.
<FileSource src="/framed/Tabs/TabsDynamic" />
<FileSource src="/framed/Tabs/TabsReactiveEach" />
### Skeleton