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

docs(content-switcher): improve docs

Browse source
This commit is contained in:
Eric Liu 2025-04-20 15:14:47 -07:00
commit f66833c089
1 changed files with 18 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

18
docs/src/pages/components/ContentSwitcher.svx
View file

@ -9,8 +9,12 @@ components: ["ContentSwitcher", "Switch"]
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
`ContentSwitcher` lets users switch between different views or sections of content. Use it to organize related content into distinct categories or states.
## Default ## Default
Create a content switcher with `Switch` components. Each switch needs a `text` prop.
<ContentSwitcher> <ContentSwitcher>
<Switch text="Latest news" /> <Switch text="Latest news" />
<Switch text="Trending" /> <Switch text="Trending" />
@ -18,6 +22,8 @@ components: ["ContentSwitcher", "Switch"]
## Initial selected index ## Initial selected index
Set `selectedIndex` to pre-select a switch when the content switcher loads.
<ContentSwitcher selectedIndex={1}> <ContentSwitcher selectedIndex={1}>
<Switch text="Latest news" /> <Switch text="Latest news" />
<Switch text="Trending" /> <Switch text="Trending" />
@ -26,10 +32,16 @@ components: ["ContentSwitcher", "Switch"]
## Reactive example ## Reactive example
This example demonstrates how to programmatically control the content switcher using
the `bind:selectedIndex` directive. Update the selected index based on user
interactions or application state.
<FileSource src="/framed/ContentSwitcher/ContentSwitcherReactive" /> <FileSource src="/framed/ContentSwitcher/ContentSwitcherReactive" />
## Custom switch slot ## Custom switch slot
Override the default slot in `Switch` to customize how each option displays.
<ContentSwitcher> <ContentSwitcher>
<Switch> <Switch>
<div style="display: flex; align-items: center;"> <div style="display: flex; align-items: center;">
@ -45,6 +57,8 @@ components: ["ContentSwitcher", "Switch"]
## Extra-large size ## Extra-large size
Set `size` to `"xl"` for an extra-large content switcher.
<ContentSwitcher size="xl"> <ContentSwitcher size="xl">
<Switch text="All" /> <Switch text="All" />
<Switch text="Archived" /> <Switch text="Archived" />
@ -52,6 +66,8 @@ components: ["ContentSwitcher", "Switch"]
## Small size ## Small size
Set `size` to `"sm"` for a small content switcher.
<ContentSwitcher size="sm"> <ContentSwitcher size="sm">
<Switch text="All" /> <Switch text="All" />
<Switch text="Archived" /> <Switch text="Archived" />
@ -59,6 +75,8 @@ components: ["ContentSwitcher", "Switch"]
## Disabled ## Disabled
Set `disabled` to `true` on individual switches to prevent interaction.
<ContentSwitcher> <ContentSwitcher>
<Switch disabled text="All" /> <Switch disabled text="All" />
<Switch disabled text="Archived" /> <Switch disabled text="Archived" />