mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
dce2dda72a* chore(docs): run "npx browserslist@latest --update-db" * chore(docs): upgrade carbon-icons-svelte to latest * refactor(docs): re-use styles from css/all.scss * chore(docs): add pnpm install command * chore(docs): upgrade prettier, prettier-plugin-svelte * docs(date-picker): improve "DatePicker in a modal" example * fix(docs): restore "scripts-markup-styles" svelte sort order * chore(docs): upgrade mdsvex * chore(deps-dev): bump prettier, prettier-plugin-svelte, svelte * refactor(docs): use svelte:fragment where applicable * fix(docs): include missing "options" in svelteSortOrder prettier config
63 lines
No EOL
1.4 KiB
Text
63 lines
No EOL
1.4 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" />
|
|
|
|
### Container type
|
|
|
|
<Tabs type="container">
|
|
<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 (container)
|
|
|
|
<TabsSkeleton type="container" count={3} /> |