mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31:06 +00:00
feat: support item.disabled
key for Dropdown
, MultiSelect
, ComboBox
(#1328)
Closes #1326 * feat: support item.disabled key for `Dropdown`, `MultiSelect`, `ComboBox` * Run "yarn build:docs" * test: assert disabled property * docs: add "Disabled items" examples
This commit is contained in:
parent
22f93ee675
commit
f25a10c9c4
16 changed files with 150 additions and 19 deletions
|
@ -112,11 +112,25 @@ items={[
|
|||
{id: "2", text: "Fax"}
|
||||
]} />
|
||||
|
||||
### Disabled
|
||||
### Disabled state
|
||||
|
||||
<ComboBox disabled titleText="Contact" placeholder="Select contact method"
|
||||
items={[
|
||||
{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}
|
||||
]} />
|
||||
]} />
|
||||
|
||||
### Disabled items
|
||||
|
||||
Use the `disabled` property in the `items` prop to disable specific items.
|
||||
|
||||
<ComboBox
|
||||
titleText="Contact"
|
||||
placeholder="Select contact method"
|
||||
items={[
|
||||
{ id: "0", text: "Slack" },
|
||||
{ id: "1", text: "Email", disabled: true },
|
||||
{ id: "2", text: "Fax" },
|
||||
]}
|
||||
/>
|
|
@ -95,6 +95,20 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
|
|||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}]}" />
|
||||
|
||||
### Disabled items
|
||||
|
||||
Use the `disabled` property in the `items` prop to disable specific items.
|
||||
|
||||
<Dropdown
|
||||
selectedId="0"
|
||||
titleText="Contact"
|
||||
items={[
|
||||
{ id: "0", text: "Slack" },
|
||||
{ id: "1", text: "Email", disabled: true },
|
||||
{ id: "2", text: "Fax" },
|
||||
]}
|
||||
/>
|
||||
|
||||
### Skeleton
|
||||
|
||||
<DropdownSkeleton />
|
|
@ -145,4 +145,18 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
|
|||
items="{[{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}]}"
|
||||
/>
|
||||
/>
|
||||
|
||||
### Disabled items
|
||||
|
||||
Use the `disabled` property in the `items` prop to disable specific items.
|
||||
|
||||
<MultiSelect
|
||||
titleText="Contact"
|
||||
label="Select contact methods..."
|
||||
items={[
|
||||
{ id: "0", text: "Slack" },
|
||||
{ id: "1", text: "Email", disabled: true },
|
||||
{ id: "2", text: "Fax" },
|
||||
]}
|
||||
/>
|
Loading…
Add table
Add a link
Reference in a new issue