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

docs(select): adjust default example to demo usage without selected prop (#1358)

Browse source
This commit is contained in:
metonym 2022-06-18 12:45:39 -07:00 • committed by GitHub
commit a86aa5d363
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,7 +9,33 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
### Default
<Select labelText="Carbon theme" selected="g10" >
If the `selected` prop is not set, the value of the first `SelectItem` will be used as the default value.
<Select labelText="Carbon theme" on:change={e => console.log("value", e.detail)}>
<SelectItem value="white" />
<SelectItem value="g10" />
<SelectItem value="g80" />
<SelectItem value="g90" />
<SelectItem value="g100" />
</Select>
### Custom item text
Use the `text` prop on `SelectItem` to customize the display value.
<Select labelText="Carbon theme" on:change={e => console.log("value", e.detail)}>
<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>
### Initial selected value
Use the `selected` prop to specify an initial value.
<Select labelText="Carbon theme" selected="g10" on:change={e => console.log("value", e.detail)}>
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
@ -19,6 +45,8 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
### Reactive example
The `selected` prop is reactive and supports two-way binding.
<FileSource src="/framed/Select/SelectReactive" />
### Helper text