mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 02:41:05 +00:00
1628f56184In v11 [Tabs](https://carbondesignsystem.com/migrating/guide/design/#tabs-breaking) received some additional modifiers. In this commit we only want to make sure that the Svelte v10 tabs still work using v11 styles. This probably needs additional testing.
82 lines
No EOL
2 KiB
Text
82 lines
No EOL
2 KiB
Text
---
|
|
components: ["Tabs", "Tab", "TabContent", "TabsSkeleton"]
|
|
---
|
|
|
|
<script>
|
|
import { Tabs, Tab, TabContent, TabsSkeleton } from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
## Default
|
|
|
|
<Tabs>
|
|
<Tab label="Tab label 1" />
|
|
<Tab label="Tab label 2" />
|
|
<Tab label="Tab label 3" />
|
|
<svelte:fragment slot="content">
|
|
<TabContent>Content 1</TabContent>
|
|
<TabContent>Content 2</TabContent>
|
|
<TabContent>Content 3</TabContent>
|
|
</svelte:fragment>
|
|
</Tabs>
|
|
|
|
## Auto width
|
|
|
|
By default, the width of each tab is set to `10rem`.
|
|
|
|
Set `autoWidth` to `true` for tabs to have an automatically set width.
|
|
|
|
<Tabs autoWidth>
|
|
<Tab label="Tab label 1" />
|
|
<Tab label="Tab label 2" />
|
|
<Tab label="Tab label 3" />
|
|
<svelte:fragment slot="content">
|
|
<TabContent>Content 1</TabContent>
|
|
<TabContent>Content 2</TabContent>
|
|
<TabContent>Content 3</TabContent>
|
|
</svelte:fragment>
|
|
</Tabs>
|
|
|
|
## Reactive example
|
|
|
|
<FileSource src="/framed/Tabs/TabsReactive" />
|
|
|
|
## Disabled tabs
|
|
|
|
Setting `disabled` to `true` on the `Tab` component will prevent it from being clickable.
|
|
|
|
Using keyboard navigation (left and right arrow keys) will skip to the next non-disabled tab.
|
|
|
|
<Tabs>
|
|
<Tab label="Tab label 1" />
|
|
<Tab label="Tab label 2" disabled />
|
|
<Tab label="Tab label 3" disabled />
|
|
<Tab label="Tab label 4" />
|
|
<svelte:fragment slot="content">
|
|
<TabContent>Content 1</TabContent>
|
|
<TabContent>Content 2</TabContent>
|
|
<TabContent>Content 3</TabContent>
|
|
<TabContent>Content 4</TabContent>
|
|
</svelte:fragment>
|
|
</Tabs>
|
|
|
|
## Contained
|
|
|
|
<Tabs contained>
|
|
<Tab label="Tab label 1" />
|
|
<Tab label="Tab label 2" />
|
|
<Tab label="Tab label 3" />
|
|
<svelte:fragment slot="content">
|
|
<TabContent>Content 1</TabContent>
|
|
<TabContent>Content 2</TabContent>
|
|
<TabContent>Content 3</TabContent>
|
|
</svelte:fragment>
|
|
</Tabs>
|
|
|
|
## Skeleton (default)
|
|
|
|
<TabsSkeleton count={3} />
|
|
|
|
## Skeleton (contained)
|
|
|
|
<TabsSkeleton contained count={3} /> |