mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
d31e529ca9* fix(ComboBox): programmatically set selected index * refactor(ComboBox): renaming example to Reactive example
117 lines
No EOL
2.7 KiB
Text
117 lines
No EOL
2.7 KiB
Text
<script>
|
|
import { ComboBox } from "carbon-components-svelte";
|
|
import { Button } from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
let comboboxComponent
|
|
let selectedIndex = 1
|
|
</script>
|
|
|
|
### Default
|
|
|
|
<ComboBox titleText="Contact" placeholder="Select contact method"
|
|
items={[
|
|
{id: "0", text: "Slack"},
|
|
{id: "1", text: "Email"},
|
|
{id: "2", text: "Fax"}
|
|
]} />
|
|
|
|
### Selected index
|
|
|
|
<ComboBox titleText="Contact" placeholder="Select contact method"
|
|
selectedIndex={1}
|
|
items={[
|
|
{id: "0", text: "Slack"},
|
|
{id: "1", text: "Email"},
|
|
{id: "2", text: "Fax"}
|
|
]} />
|
|
|
|
### Reactive example
|
|
|
|
<FileSource src="/framed/ComboBox/ReactiveComboBox" />
|
|
|
|
### Clear selection
|
|
|
|
<ComboBox titleText="Contact" placeholder="Select contact method"
|
|
bind:this={comboboxComponent}
|
|
items={[
|
|
{id: "0", text: "Slack"},
|
|
{id: "1", text: "Email"},
|
|
{id: "2", text: "Fax"}
|
|
]} />
|
|
<br>
|
|
<Button on:click={comboboxComponent.clear}>Clear</Button>
|
|
|
|
### Multiple combo boxes
|
|
|
|
<FileSource src="/framed/ComboBox/MultipleComboBox" />
|
|
|
|
### Filterable
|
|
|
|
<FileSource src="/framed/ComboBox/FilterableComboBox" />
|
|
|
|
### Top direction
|
|
|
|
Set `direction` to `"top"` for the combobox dropdown menu to appear above the input.
|
|
|
|
<ComboBox direction="top" titleText="Contact" placeholder="Select contact method"
|
|
items={[
|
|
{id: "0", text: "Slack"},
|
|
{id: "1", text: "Email"},
|
|
{id: "2", text: "Fax"}
|
|
]} />
|
|
|
|
### Light variant
|
|
|
|
<ComboBox light titleText="Contact" placeholder="Select contact method"
|
|
items={[
|
|
{id: "0", text: "Slack"},
|
|
{id: "1", text: "Email"},
|
|
{id: "2", text: "Fax"}
|
|
]} />
|
|
|
|
### Extra-large size
|
|
|
|
<ComboBox titleText="Contact" placeholder="Select contact method"
|
|
size="xl"
|
|
items={[
|
|
{id: "0", text: "Slack"},
|
|
{id: "1", text: "Email"},
|
|
{id: "2", text: "Fax"}
|
|
]} />
|
|
|
|
### Small size
|
|
|
|
<ComboBox titleText="Contact" placeholder="Select contact method"
|
|
size="sm"
|
|
items={[
|
|
{id: "0", text: "Slack"},
|
|
{id: "1", text: "Email"},
|
|
{id: "2", text: "Fax"}
|
|
]} />
|
|
|
|
### Invalid state
|
|
|
|
<ComboBox invalid invalidText="Secondary contact method must be different from the primary contact" titleText="Contact" placeholder="Select contact method"
|
|
items={[
|
|
{id: "0", text: "Slack"},
|
|
{id: "1", text: "Email"},
|
|
{id: "2", text: "Fax"}
|
|
]} />
|
|
|
|
### Warning state
|
|
|
|
<ComboBox warn warnText="This contact method is not associated with your account" titleText="Contact" placeholder="Select contact method"
|
|
items={[
|
|
{id: "0", text: "Slack"},
|
|
{id: "1", text: "Email"},
|
|
{id: "2", text: "Fax"}
|
|
]} />
|
|
|
|
### Disabled
|
|
|
|
<ComboBox disabled titleText="Contact" placeholder="Select contact method"
|
|
items={[
|
|
{id: "0", text: "Slack"},
|
|
{id: "1", text: "Email"},
|
|
{id: "2", text: "Fax"}
|
|
]} /> |