mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
docs(multi-select): improvements [ci skip]
This commit is contained in:
parent
58e4655bad
commit
9ebf6963e0
1 changed files with 23 additions and 15 deletions
|
@ -24,15 +24,30 @@ Checkbox attributes can be adjusted via the `itemToInput` prop.
|
||||||
{id: "2", text: "Fax"}]}"
|
{id: "2", text: "Fax"}]}"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
## Format item display text
|
||||||
|
|
||||||
|
Use the `itemToString` prop to format the display of individual items without modifying the underlying value.
|
||||||
|
|
||||||
|
<MultiSelect itemToString={item => {
|
||||||
|
return item.text + ' (' + item.id +')'
|
||||||
|
}} titleText="Contact" label="Select contact methods..."
|
||||||
|
items="{[{id: "0", text: "Slack"},
|
||||||
|
{id: "1", text: "Email"},
|
||||||
|
{id: "2", text: "Fax"}]}"
|
||||||
|
sortItem="{() => {}}"
|
||||||
|
/>
|
||||||
|
|
||||||
## Custom slot
|
## Custom slot
|
||||||
|
|
||||||
Override the default slot to customize the display of each item. Access the item and index through the `let:` directive.
|
For even more customization, use the default slot.
|
||||||
|
|
||||||
|
Access the `item` and `index` values through the `let:` directive.
|
||||||
|
|
||||||
<FileSource src="/framed/MultiSelect/MultiSelectSlot" />
|
<FileSource src="/framed/MultiSelect/MultiSelectSlot" />
|
||||||
|
|
||||||
## No alphabetical ordering
|
## No alphabetical ordering
|
||||||
|
|
||||||
To prevent alphabetical item ordering, pass an empty function to the `sortItem` prop.
|
To prevent alphabetical item ordering, pass a noop function to the `sortItem` prop.
|
||||||
|
|
||||||
<MultiSelect titleText="Contact" label="Select contact methods..."
|
<MultiSelect titleText="Contact" label="Select contact methods..."
|
||||||
items="{[{id: "0", text: "Slack"},
|
items="{[{id: "0", text: "Slack"},
|
||||||
|
@ -43,6 +58,8 @@ To prevent alphabetical item ordering, pass an empty function to the `sortItem`
|
||||||
|
|
||||||
## Filterable
|
## Filterable
|
||||||
|
|
||||||
|
Set `filterable` to `true` to enable filtering.
|
||||||
|
|
||||||
`$$restProps` are spread to the underlying input element.
|
`$$restProps` are spread to the underlying input element.
|
||||||
|
|
||||||
<MultiSelect spellcheck="false" filterable titleText="Contact" placeholder="Filter contact methods..."
|
<MultiSelect spellcheck="false" filterable titleText="Contact" placeholder="Filter contact methods..."
|
||||||
|
@ -65,19 +82,6 @@ To select (or bind) items, pass an array of item ids to `selectedIds`.
|
||||||
|
|
||||||
<FileSource src="/framed/MultiSelect/MultipleMultiSelect" />
|
<FileSource src="/framed/MultiSelect/MultipleMultiSelect" />
|
||||||
|
|
||||||
## Format item display text
|
|
||||||
|
|
||||||
Use the `itemToString` prop to format the display of individual items.
|
|
||||||
|
|
||||||
<MultiSelect itemToString={item => {
|
|
||||||
return item.text + ' (' + item.id +')'
|
|
||||||
}} titleText="Contact" label="Select contact methods..."
|
|
||||||
items="{[{id: "0", text: "Slack"},
|
|
||||||
{id: "1", text: "Email"},
|
|
||||||
{id: "2", text: "Fax"}]}"
|
|
||||||
sortItem="{() => {}}"
|
|
||||||
/>
|
|
||||||
|
|
||||||
## Format checkbox values
|
## Format checkbox values
|
||||||
|
|
||||||
Use the `itemToInput` prop to customize the user-selectable checkbox values.
|
Use the `itemToInput` prop to customize the user-selectable checkbox values.
|
||||||
|
@ -118,6 +122,10 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
|
||||||
|
|
||||||
## Hidden label
|
## Hidden label
|
||||||
|
|
||||||
|
Set `hideLabel` to `true` to visually hide the label.
|
||||||
|
|
||||||
|
Note that you should still specify a `label` for accessibility.
|
||||||
|
|
||||||
<MultiSelect titleText="Contact" label="Select contact methods..." hideLabel
|
<MultiSelect titleText="Contact" label="Select contact methods..." hideLabel
|
||||||
items="{[{id: "0", text: "Slack"},
|
items="{[{id: "0", text: "Slack"},
|
||||||
{id: "1", text: "Email"},
|
{id: "1", text: "Email"},
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue