rob-balfre / svelte-select

Svelte Select. A select component for Svelte
https://svelte-select-examples.vercel.app
Other
1.25k stars 175 forks source link

How to have custom label per item #586

Closed EddTally closed 1 year ago

EddTally commented 1 year ago

Pre v5 we had these options, getOptionLabel & getSelectionLabel. This allowed us to edit how the label was displayed, like so:

getOptionLabel={(option) => `Item Id: ${option.itemId}, Item Name: ${option.itemName}`}
getSelectionLabel={(option) => `Selected Id: ${option.itemId}, Selected Name: ${option.itemName}`}

I read the docs but cannot find a replacement for this functionality. Could I get some help please.

rob-balfre commented 1 year ago

Named slots.

On Tue, 11 Apr 2023, 8:41 pm EddTally, @.***> wrote:

Pre v5 we had these options, getOptionLabel & getSelectionLabel. This allowed us to edit how the label was displayed, like so:

getOptionLabel={(option) => Item Id: ${option.itemId}, Item Name: ${option.itemName}}getSelectionLabel={(option) => Selected Id: ${option.itemId}, Selected Name: ${option.itemName}}

I read the docs but cannot find a replacement for this functionality. Could I get some help please.

— Reply to this email directly, view it on GitHub https://github.com/rob-balfre/svelte-select/issues/586, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAUAM7WUCMBS2QO6U2J5EFTXAUYNDANCNFSM6AAAAAAW2C5SZY . You are receiving this because you are subscribed to this thread.Message ID: @.***>

EddTally commented 1 year ago

Named slots.

So I would do something like

<div slot="item" let:item > Item Id: {item.itemId}, Item Name: {item.itemName} </div>
<div slot="selection" let:selection > Selected Id: {selection.itemId}, Selected Name: {selection.itemName} </div>

These are new to me, just learned from here https://svelte.dev/tutorial/slot-props

Thanks