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: use key block to recreate Tabs

Browse source
This commit is contained in:
Eric Liu 2020-11-30 08:14:56 -08:00
commit 9bd632173e
2 changed files with 85 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

42
docs/src/pages/framed/Tabs/TabsDynamic.svelte Normal file
View file

@ -0,0 +1,42 @@
<script>
import { Button, Tabs, Tab, TabContent } from "carbon-components-svelte";
let tabs = [
{ title: "blue", visible: true },
{ title: "green", visible: false },
{ title: "red", visible: true },
];
const toggleTab = (title) => {
for (const i in tabs) {
if (tabs[i].title === title) {
tabs[i].visible = !tabs[i].visible;
}
}
};
let selected = 0;
</script>
{#key tabs}
<Tabs bind:selected>
{#each tabs as tab (tab.title)}
{#if tab.visible}
<Tab label="{tab.title}" />
{/if}
{/each}
<div slot="content">
{#each tabs as tab (tab.title)}
{#if tab.visible}
<TabContent>Content for {tab.title}</TabContent>
{/if}
{/each}
</div>
</Tabs>
{/key}
<p>Selected index: {selected}</p>
{#each tabs as { title } (title)}
<Button on:click="{() => toggleTab(title)}">Toggle {title} tab</Button>
{/each}

43
docs/src/pages/framed/Tabs/TabsDynamicImmutable.svelte Normal file
View file

@ -0,0 +1,43 @@
<script>
import { Button, Tabs, Tab, TabContent } from "carbon-components-svelte";
let tabs = [
{ title: "blue", visible: true },
{ title: "green", visible: false },
{ title: "red", visible: true },
];
const toggleTab = (title) => {
tabs = tabs.map((tab) => ({
...tab,
visible: tab.title === title ? !tab.visible : tab.visible,
}));
};
let selected = 0;
</script>
<svelte:options immutable />
{#key tabs}
<Tabs bind:selected>
{#each tabs as tab (tab.title)}
{#if tab.visible}
<Tab label="{tab.title}" />
{/if}
{/each}
<div slot="content">
{#each tabs as tab (tab.title)}
{#if tab.visible}
<TabContent>Content for {tab.title}</TabContent>
{/if}
{/each}
</div>
</Tabs>
{/key}
<p>Selected index: {selected}</p>
{#each tabs as { title } (title)}
<Button on:click="{() => toggleTab(title)}">Toggle {title} tab</Button>
{/each}