mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-20 12:23:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

Initial commit

Browse source
This commit is contained in:
davideraccagni 2022-04-14 18:29:54 +02:00
commit db2d2ad69b
23 changed files with 6936 additions and 1158 deletions
Download patch file Download diff file Expand all files Collapse all files

92
tests/AutoComplete.svelte Normal file
View file

@ -0,0 +1,92 @@
<script lang="ts">
import { AutoComplete, AutoCompleteSkeleton } from "../types";
</script>
<AutoComplete
direction="top"
titleText="Contact"
selectedId="0"
items="{[
{ id: 0, text: 'Slack' },
{ id: '1', text: 'Email' },
{ id: '2', text: 'Fax' },
]}"
on:select="{(e) => {
console.log(e.detail.selectedId);
}}"
let:item
let:index
>
{item.id}
{index}
</AutoComplete>
<AutoComplete
itemToString="{(item) => {
return item.text + ' (' + item.id + ')';
}}"
titleText="Contact"
selectedId="0"
items="{[
{ id: '0', text: 'Slack' },
{ id: '1', text: 'Email' },
{ id: '2', text: 'Fax' },
]}"
/>
<AutoComplete
light
titleText="Contact"
selectedId="0"
items="{[
{ id: '0', text: 'Slack' },
{ id: '1', text: 'Email' },
{ id: '2', text: 'Fax' },
]}"
/>
<AutoComplete
type="inline"
titleText="Contact"
selectedId="0"
items="{[
{ id: '0', text: 'Slack' },
{ id: '1', text: 'Email' },
{ id: '2', text: 'Fax' },
]}"
/>
<AutoComplete
size="xl"
titleText="Contact"
selectedId="0"
items="{[
{ id: '0', text: 'Slack' },
{ id: '1', text: 'Email' },
{ id: '2', text: 'Fax' },
]}"
/>
<AutoComplete
size="sm"
titleText="Contact"
selectedId="0"
items="{[
{ id: '0', text: 'Slack' },
{ id: '1', text: 'Email' },
{ id: '2', text: 'Fax' },
]}"
/>
<AutoComplete
disabled
titleText="Contact"
selectedId="0"
items="{[
{ id: '0', text: 'Slack' },
{ id: '1', text: 'Email' },
{ id: '2', text: 'Fax' },
]}"
/>
<AutoCompleteSkeleton />