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

feat(components): add Select, SelectItem, SelectItemGroup

Browse source 
Closes #31
This commit is contained in:
Eric Liu 2019-12-21 17:18:35 -08:00
commit 6c75c8a973
9 changed files with 243 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/components/Select/Select.Story.svelte Normal file
View file

@ -0,0 +1,29 @@
<script>
export let story = undefined;
import Layout from '../../internal/ui/Layout.svelte';
import Select from './Select.svelte';
import SelectItem from './SelectItem.svelte';
import SelectSkeleton from './Select.Skeleton.svelte';
import SelectItemGroup from './SelectItemGroup.svelte';
</script>
<Layout>
<div>
{#if story === 'skeleton'}
<SelectSkeleton {...$$props} />
{:else}
<Select {...$$props.select} id="select-1" defaultValue="placeholder-item">
<SelectItem value="placeholder-item" text="Choose an option" disabled hidden />
<SelectItemGroup {...$$props.group} label="Category 1">
<SelectItem value="option-1" text="Option 1" />
<SelectItem value="option-2" text="Option 2" />
</SelectItemGroup>
<SelectItemGroup {...$$props.group} label="Category 2">
<SelectItem value="option-3" text="Option 3" />
<SelectItem value="option-4" text="Option 4" />
</SelectItemGroup>
</Select>
{/if}
</div>
</Layout>