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): add selected index example, use more realistic copy

Browse source
This commit is contained in:
Eric Liu 2020-10-22 08:53:16 -07:00
commit dbb1f9e8a5
1 changed files with 27 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,24 +4,31 @@ components: ["ContentSwitcher", "Switch"]
<script> <script>
import { ContentSwitcher, Switch } from "carbon-components-svelte"; import { ContentSwitcher, Switch } from "carbon-components-svelte";
import Add16 from "carbon-icons-svelte/lib/Add16"; import Bullhorn16 from "carbon-icons-svelte/lib/Bullhorn16";
import Analytics16 from "carbon-icons-svelte/lib/Analytics16";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
### Default ### Default
<ContentSwitcher> <ContentSwitcher>
<Switch text="Switch 1" /> <Switch text="Latest news" />
<Switch text="Switch 2" /> <Switch text="Trending" />
<Switch text="Switch 3" /> </ContentSwitcher>
### Initial selected index
<ContentSwitcher selectedIndex={1}>
<Switch text="Latest news" />
<Switch text="Trending" />
<Switch text="Recommended" />
</ContentSwitcher> </ContentSwitcher>
### Light variant ### Light variant
<ContentSwitcher light> <ContentSwitcher light>
<Switch text="Switch 1" /> <Switch text="Latest news" />
<Switch text="Switch 2" /> <Switch text="Trending" />
<Switch text="Switch 3" />
</ContentSwitcher> </ContentSwitcher>
### Custom switch slot ### Custom switch slot
@ -29,31 +36,33 @@ components: ["ContentSwitcher", "Switch"]
<ContentSwitcher> <ContentSwitcher>
<Switch> <Switch>
<div style="display: flex; align-items: center;"> <div style="display: flex; align-items: center;">
Third section <Add16 style="margin-left: .25rem;" /> <Bullhorn16 style="margin-right: 0.5rem;" /> Latest news
</div> </div>
</Switch>
<Switch>
<div style="display: flex; align-items: center;">
<Analytics16 style="margin-right: 0.5rem;" /> Trending
</div>
</Switch> </Switch>
<Switch text="Switch 2" />
</ContentSwitcher> </ContentSwitcher>
### Extra-large size ### Extra-large size
<ContentSwitcher size="xl"> <ContentSwitcher size="xl">
<Switch text="Switch 1" /> <Switch text="All" />
<Switch text="Switch 2" /> <Switch text="Archived" />
<Switch text="Switch 3" />
</ContentSwitcher> </ContentSwitcher>
### Small size ### Small size
<ContentSwitcher size="sm"> <ContentSwitcher size="sm">
<Switch text="Switch 1" /> <Switch text="All" />
<Switch text="Switch 2" /> <Switch text="Archived" />
<Switch text="Switch 3" />
</ContentSwitcher> </ContentSwitcher>
### Disabled ### Disabled
<ContentSwitcher> <ContentSwitcher>
<Switch text="Switch 1" disabled /> <Switch disabled text="All" />
<Switch text="Switch 2" disabled /> <Switch disabled text="Archived" />
</ContentSwitcher> </ContentSwitcher>