mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-19 03:49:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(Select)!: dispatch update instead of input

Browse source 
Adjust Select docs to use native change event handling.
This commit is contained in:
Enrico Sacchetti 2022-12-12 11:34:55 -05:00
commit 1b54825c85
5 changed files with 13 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -11,7 +11,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
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)}>
<Select labelText="Carbon theme" on:change={e => console.log("value", e.target.value)}>
<SelectItem value="white" />
<SelectItem value="g10" />
<SelectItem value="g80" />
@ -23,7 +23,7 @@ If the `selected` prop is not set, the value of the first `SelectItem` will be u
Use the `text` prop on `SelectItem` to customize the display value.
<Select labelText="Carbon theme" on:change={e => console.log("value", e.detail)}>
<Select labelText="Carbon theme" on:change={e => console.log("value", e.target.value)}>
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
@ -35,7 +35,7 @@ Use the `text` prop on `SelectItem` to customize the display value.
Use the `selected` prop to specify an initial value.
<Select labelText="Carbon theme" selected="g10" on:change={e => console.log("value", e.detail)}>
<Select labelText="Carbon theme" selected="g10" on:change={e => console.log("value", e.target.value)}>
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
@ -160,4 +160,4 @@ The `selected` prop is reactive and supports two-way binding.
## Skeleton (hidden label)
<SelectSkeleton hideLabel />
<SelectSkeleton hideLabel />