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(multi-select): add examples for initial selected items, format display text

Browse source
This commit is contained in:
Eric Liu 2020-10-29 17:43:08 -07:00
commit 956b316009
1 changed files with 27 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

29
docs/src/pages/components/MultiSelect.svx
View file

@ -10,7 +10,7 @@ By default, items will be ordered alphabetically based on the `item.text` value.
<MultiSelect titleText="Contact" label="Select contact methods..."
items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" selectedIds="{["0", "1"]}"
{id: "2", text: "Fax"}]}"
/>
### No alphabetical ordering
@ -20,7 +20,32 @@ To prevent alphabetical item ordering, pass an empty function to the `sortItem`
<MultiSelect titleText="Contact" label="Select contact methods..."
items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" selectedIds="{["0", "1"]}"
{id: "2", text: "Fax"}]}"
sortItem="{() => {}}"
/>
### Initial selected items
To select (or bind) items, pass an array of item ids to `selectedIds`.
<MultiSelect selectedIds="{["0", "1"]}" titleText="Contact" label="Select contact methods..."
items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}"
/>
### 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="{() => {}}"
/>