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

docs: add new component docs

Browse source
This commit is contained in:
Eric Liu 2020-10-02 20:13:02 -07:00
commit 2008d0035f
130 changed files with 6662 additions and 3801 deletions
Download patch file Download diff file Expand all files Collapse all files

58
docs/src/pages/components/Select.svx Normal file
View file

@ -0,0 +1,58 @@
<script>
import { Select, SelectItem, SelectItemGroup, SelectSkeleton } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<Select labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
### Item groups
<Select labelText="Carbon theme" selected="g10" >
<SelectItem value="0" text="Select a theme" disabled hidden />
<SelectItemGroup label="Light theme">
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
</SelectItemGroup>
<SelectItemGroup label="Dark theme">
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</SelectItemGroup>
</Select>
### Light variant
<Select light labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
### Inline type
<Select inline labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
### Disabled
<Select disabled labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
### Skeleton
<SelectSkeleton />