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(select): add reactive example (#1011)

Browse source
This commit is contained in:
Eric Liu 2022-01-16 14:53:22 -08:00 • committed by GitHub
commit e5f77aa614
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

4
docs/src/pages/components/Select.svx
View file

@ -17,6 +17,10 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </Select>
### Reactive example
<FileSource src="/framed/Select/SelectReactive" />
### Helper text ### Helper text
<Select helperText="Carbon offers 4 themes (2 light, 3 dark)" labelText="Carbon theme" selected="g10" > <Select helperText="Carbon offers 4 themes (2 light, 3 dark)" labelText="Carbon theme" selected="g10" >

21
docs/src/pages/framed/Select/SelectReactive.svelte Normal file
View file

@ -0,0 +1,21 @@
<script>
import { Select, SelectItem, Button } from "carbon-components-svelte";
let selected = "g10";
</script>
<Select labelText="Carbon theme" bind:selected>
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
<div style="margin: var(--cds-layout-01) 0">
Selected: <strong>{selected}</strong>
</div>
<Button disabled="{selected === 'g90'}" on:click="{() => (selected = 'g90')}">
Set to "g90"
</Button>