ColorInvertedSelector

A selector with inversion.

Example

Props

🕹️ standard props
options
Option[]
Array of selectable options
[]
selectedIndex
number
Index of the currently selected option
undefined
deletable
boolean
Determines if options can be deleted
true
class
{ container?: string, element?: string, selected?: string, }
Custom class names for styling
{}
🎨 style props
--color-inverted-selector-background-color
color
Background color of the selector
rgb(var(--global-color-background-200))
--color-inverted-selector-selected-background-color
color
Background color of the selected option
rgb(var(--global-color-primary-400))
--color-inverted-selector-selected-color
color
Text color of the selected option
rgb(var(--global-color-grey-50))
--color-inverted-selector-vertical-gap
size
Vertical gap between options
8px
--color-inverted-selector-icon-gap
size
Gap between the icon and the label
8px
--color-inverted-selector-selected-font-weight
font-weight
Font weight of the selected option
700
--color-inverted-selector-element-padding
size
Padding of each selectable element
8px 8px 8px 16px
--color-inverted-selector-element-border-radius
size
Border radius of each selectable element
5px
--color-inverted-selector-hover-background-color
color
Background color when hovering over an option
rgb(var(--global-color-primary-500), .3)

Slots

prependSnippet

Renders content before the option label

Default content:

{#if !!option.icon}
  <Icon
    name={option.icon}
  ></Icon>
{/if}
      

Available variables:

Name	Type	Description
option	Option	The current option
index	number	Index of the current option
handleClickClose	(option: Option, index: number) => void	Function to handle deletion

optionSnippet

Renders custom content for an option

Default content:

<div class="label">
  {option.label}
</div>
      

Available variables:

Name	Type	Description
option	Option	The current option

appendSnippet

Renders content after the option label

Default content:

{#if deletable}
  <Icon
    name="mdi-close"
    onclick={() => handleClickClose(option, index)}
  ></Icon>
{/if}
      

Available variables:

Name	Type	Description
option	Option	The current option
handleClickClose	(option: Option, index: number) => void	Function to handle deletion

Events

onselect

Triggered when an option is selected

Attribute	Type	Description
option	Option	The selected option
selectedIndex	number | undefined	Index of the selected option
native	Event	The native event

ondelete

Triggered when an option is deleted

Attribute	Type	Description
option	Option	The deleted option
index	number	Index of the deleted option