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

feat(components): add Tabs

Browse source 
Closes #32
This commit is contained in:
Eric Liu 2019-12-22 05:50:12 -08:00
commit 4ba8df4425
9 changed files with 331 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

43
src/components/Tabs/Tabs.Story.svelte Normal file
View file

@ -0,0 +1,43 @@
<script>
export let story = undefined;
import Layout from '../../internal/ui/Layout.svelte';
import Tabs from './Tabs.svelte';
import Tab from './Tab.svelte';
import TabContent from './TabContent.svelte';
import TabsSkeleton from './TabsSkeleton.svelte';
const { tabProps, ...tabsProps } = $$props;
let selected = 0;
</script>
<Layout>
{#if story === 'skeleton'}
<TabsSkeleton />
{:else if story === 'container'}
<Tabs {...tabsProps} type="container" bind:selected>
<Tab {...tabProps} label="Tab label 1" />
<Tab {...tabProps} label="Tab label 2" />
<Tab {...tabProps} label="Tab label 3" />
<div slot="content">
<TabContent>Content 1</TabContent>
<TabContent>Content 2</TabContent>
<TabContent>Content 3</TabContent>
</div>
</Tabs>
{:else}
<Tabs {...tabsProps} bind:selected>
<Tab {...tabProps} label="Tab label 1" />
<Tab {...tabProps} label="Tab label 2" />
<Tab {...tabProps} label="Tab label 3" disabled />
<Tab {...tabProps} label="Tab label 4" />
<div slot="content">
<TabContent>Content 1</TabContent>
<TabContent>Content 2</TabContent>
<TabContent>Content 3</TabContent>
<TabContent>Content 4</TabContent>
</div>
</Tabs>
{/if}
</Layout>