feat(combo-box): make ComboBox slottable (#1181)

Closes #1176
This commit is contained in:
metonym 2022-03-19 09:15:41 -07:00 committed by GitHub
commit 2858776367
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 57 additions and 5 deletions

View file

@ -18,6 +18,12 @@ items={[
{id: "2", text: "Fax"}
]} />
### Custom slot
Override the default slot to customize the display of each item. Access the item and index through the `let:` directive.
<FileSource src="/framed/ComboBox/ComboBoxSlot" />
### Selected id
<ComboBox titleText="Contact" placeholder="Select contact method"

View file

@ -0,0 +1,29 @@
<script>
import { ComboBox } from "carbon-components-svelte";
</script>
<ComboBox
titleText="Contact"
placeholder="Select contact method"
items="{[
{ id: '0', text: 'Slack' },
{ id: '1', text: 'Email' },
{ id: '2', text: 'Fax' },
]}"
let:item
let:index
>
<div>
<strong>{item.text}</strong>
</div>
<div>
id: {item.id} - index:
{index}
</div>
</ComboBox>
<style>
:global(.bx--list-box__menu-item, .bx--list-box__menu-item__option) {
height: auto;
}
</style>