docs(combo-box): add "Custom slot" example

This commit is contained in:
Eric Liu 2022-03-19 08:37:10 -07:00
commit a639b8f513
2 changed files with 35 additions and 0 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>