mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
docs(combo-box): add filterable example
This commit is contained in:
parent
e221888565
commit
3b24d21168
2 changed files with 19 additions and 0 deletions
|
@ -22,6 +22,10 @@ items={[
|
||||||
{id: "2", text: "Fax"}
|
{id: "2", text: "Fax"}
|
||||||
]} />
|
]} />
|
||||||
|
|
||||||
|
### Filterable
|
||||||
|
|
||||||
|
<FileSource src="/framed/ComboBox/FilterableComboBox" />
|
||||||
|
|
||||||
### Light variant
|
### Light variant
|
||||||
|
|
||||||
<ComboBox light titleText="Contact" placeholder="Select contact method"
|
<ComboBox light titleText="Contact" placeholder="Select contact method"
|
||||||
|
|
15
docs/src/pages/framed/ComboBox/FilterableComboBox.svelte
Normal file
15
docs/src/pages/framed/ComboBox/FilterableComboBox.svelte
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
<script>
|
||||||
|
import { ComboBox } from "carbon-components-svelte";
|
||||||
|
|
||||||
|
function shouldFilterItem(item, value) {
|
||||||
|
if (!value) return true;
|
||||||
|
return item.text.toLowerCase().includes(value.toLowerCase());
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<ComboBox
|
||||||
|
titleText="Contact"
|
||||||
|
placeholder="Select contact method"
|
||||||
|
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
|
||||||
|
shouldFilterItem="{shouldFilterItem}"
|
||||||
|
/>
|
Loading…
Add table
Add a link
Reference in a new issue