mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
c6fc8548d3* chore(deps-dev): upgrade carbon-components to v10.46.0 * feat(tag): support outline type * feat(multi-select): add hideLabel prop * chore: delete unused publish-examples.js * chore(deps-dev): remove gh-pages * chore: remove publish-examples script * chore(deps-dev): upgrade carbon-components to v10.46.0 * feat(tag): support outline type * feat(multi-select): add hideLabel prop * chore: delete unused publish-examples.js * chore(deps-dev): remove gh-pages * chore: remove publish-examples script * chore: rebuild component index
111 lines
2.1 KiB
Svelte
111 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import { MultiSelect } from "../types";
|
|
</script>
|
|
|
|
<MultiSelect
|
|
direction="top"
|
|
titleText="Contact"
|
|
label="Select contact methods..."
|
|
hideLabel
|
|
items="{[
|
|
{ id: '0', text: 'Slack' },
|
|
{ id: '1', text: 'Email' },
|
|
{ id: '2', text: 'Fax' },
|
|
]}"
|
|
on:select="{(e) => {
|
|
console.log(e.detail.selectedIds);
|
|
console.log(e.detail.selected);
|
|
console.log(e.detail.unselected);
|
|
}}"
|
|
/>
|
|
|
|
<MultiSelect
|
|
titleText="Contact"
|
|
label="Select contact methods..."
|
|
items="{[
|
|
{ id: '0', text: 'Slack' },
|
|
{ id: '1', text: 'Email' },
|
|
{ id: '2', text: 'Fax' },
|
|
]}"
|
|
sortItem="{() => {}}"
|
|
/>
|
|
|
|
<MultiSelect
|
|
selectedIds="{['0', '1']}"
|
|
titleText="Contact"
|
|
label="Select contact methods..."
|
|
items="{[
|
|
{ id: '0', text: 'Slack' },
|
|
{ id: '1', text: 'Email' },
|
|
{ id: '2', text: 'Fax' },
|
|
]}"
|
|
/>
|
|
|
|
<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="{() => {}}"
|
|
/>
|
|
|
|
<MultiSelect
|
|
light
|
|
titleText="Contact"
|
|
label="Select contact methods..."
|
|
items="{[
|
|
{ id: '0', text: 'Slack' },
|
|
{ id: '1', text: 'Email' },
|
|
{ id: '2', text: 'Fax' },
|
|
]}"
|
|
/>
|
|
|
|
<MultiSelect
|
|
type="inline"
|
|
titleText="Contact"
|
|
label="Select contact methods..."
|
|
items="{[
|
|
{ id: '0', text: 'Slack' },
|
|
{ id: '1', text: 'Email' },
|
|
{ id: '2', text: 'Fax' },
|
|
]}"
|
|
/>
|
|
|
|
<MultiSelect
|
|
size="xl"
|
|
titleText="Contact"
|
|
label="Select contact methods..."
|
|
items="{[
|
|
{ id: '0', text: 'Slack' },
|
|
{ id: '1', text: 'Email' },
|
|
{ id: '2', text: 'Fax' },
|
|
]}"
|
|
/>
|
|
|
|
<MultiSelect
|
|
size="sm"
|
|
titleText="Contact"
|
|
label="Select contact methods..."
|
|
items="{[
|
|
{ id: '0', text: 'Slack' },
|
|
{ id: '1', text: 'Email' },
|
|
{ id: '2', text: 'Fax' },
|
|
]}"
|
|
/>
|
|
|
|
<MultiSelect
|
|
filterable
|
|
titleText="Contact"
|
|
placeholder="Filter contact methods..."
|
|
items="{[
|
|
{ id: '0', text: 'Slack' },
|
|
{ id: '1', text: 'Email' },
|
|
{ id: '2', text: 'Fax' },
|
|
]}"
|
|
/>
|