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

docs: update ComboBox

Browse source
This commit is contained in:
K.Kiyokawa 2022-01-17 13:33:54 +09:00
commit 069e9caf36
4 changed files with 17 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

4
docs/src/pages/components/ComboBox.svx
View file

@ -12,10 +12,10 @@ items={[
{id: "2", text: "Fax"} {id: "2", text: "Fax"}
]} /> ]} />
### Selected index ### Selected id
<ComboBox titleText="Contact" placeholder="Select contact method" <ComboBox titleText="Contact" placeholder="Select contact method"
selectedIndex={1} selectedId="1"
items={[ items={[
{id: "0", text: "Slack"}, {id: "0", text: "Slack"},
{id: "1", text: "Email"}, {id: "1", text: "Email"},

2
docs/src/pages/framed/ComboBox/ComboBoxClear.svelte
View file

@ -7,7 +7,7 @@
<ComboBox <ComboBox
titleText="Contact" titleText="Contact"
placeholder="Select contact method" placeholder="Select contact method"
selectedIndex="{1}" selectedId="1"
bind:this="{ref}" bind:this="{ref}"
items="{[ items="{[
{ id: '0', text: 'Slack' }, { id: '0', text: 'Slack' },

15
docs/src/pages/framed/ComboBox/MultipleComboBox.svelte
View file

@ -7,17 +7,18 @@
{ id: "2", text: "Fax" }, { id: "2", text: "Fax" },
]; ];
let comboBox1_selectedIndex = -1; let comboBox1_selectedId = undefined;
let comboBox2_selectedIndex = -1; let comboBox2_selectedId = undefined;
const formatSelected = (i) => (items[i] ? items[i].text : "N/A"); const formatSelected = (id) =>
items.find((item) => item.id === id)?.text ?? "N/A";
$: primary = formatSelected(comboBox1_selectedIndex); $: primary = formatSelected(comboBox1_selectedId);
$: secondary = formatSelected(comboBox2_selectedIndex); $: secondary = formatSelected(comboBox2_selectedId);
</script> </script>
<ComboBox <ComboBox
bind:selectedIndex="{comboBox1_selectedIndex}" bind:selectedId="{comboBox1_selectedId}"
titleText="Primary contact" titleText="Primary contact"
placeholder="Select primary contact method" placeholder="Select primary contact method"
items="{items}" items="{items}"
@ -26,7 +27,7 @@
<div>Primary: {primary}</div> <div>Primary: {primary}</div>
<ComboBox <ComboBox
bind:selectedIndex="{comboBox2_selectedIndex}" bind:selectedId="{comboBox2_selectedId}"
titleText="Secondary contact" titleText="Secondary contact"
placeholder="Select secondary contact method" placeholder="Select secondary contact method"
items="{items}" items="{items}"

10
docs/src/pages/framed/ComboBox/ReactiveComboBox.svelte
View file

@ -1,12 +1,12 @@
<script> <script>
import { ComboBox, Button } from "carbon-components-svelte"; import { ComboBox, Button } from "carbon-components-svelte";
let selectedIndex = 1; let selectedId = "1";
</script> </script>
<ComboBox <ComboBox
titleText="Contact" titleText="Contact"
placeholder="Select contact method" placeholder="Select contact method"
bind:selectedIndex bind:selectedId
items="{[ items="{[
{ id: '0', text: 'Slack' }, { id: '0', text: 'Slack' },
{ id: '1', text: 'Email' }, { id: '1', text: 'Email' },
@ -14,5 +14,7 @@
]}" ]}"
/> />
<br /> <br />
<Button on:click="{() => (selectedIndex = -1)}">Set to -1 (unselected)</Button> <Button on:click="{() => (selectedId = undefined)}"
<Button on:click="{() => (selectedIndex = 2)}">Set to 2 (Fax)</Button> >Set to undefined (unselected)</Button
>
<Button on:click="{() => (selectedId = '2')}">Set to 2 (Fax)</Button>