SelectableVerticalList

Vertical horizon, selectable soul.

Example

Props

🕹️ standard props
activeKeyboard
boolean
Enables keyboard navigation.
false
loopSelection
boolean
Loops selection when reaching the end.
true
focused
string | number
Currently focused element.
undefined
selected
string | number
Currently selected element.
undefined
elements
Element[]
List of elements in the list.
[]
centered
boolean
Centers the content.
false
bicolor
boolean
Applies alternating row colors.
false
appendIconSize
string
Size of the appended icon.
20pt
🎨 style props
--selectable-vertical-list-element-padding
size
Padding inside elements.
.75rem 1rem .75rem 1rem
--selectable-vertical-list-element-cursor
cursor
Cursor style for elements.
pointer
--selectable-vertical-list-selection-background-color
color
Background color for selected elements.
rgb(var(--global-color-background-300))
--selectable-vertical-list-selection-color
color
Text color for selected elements.
inherit
--selectable-vertical-list-focus-background-color
color
Background color for focused elements.
rgb(var(--global-color-background-300), .5)
--selectable-vertical-list-focus-color
color
Text color for focused elements.
inherit
--selectable-vertical-list-element-border-radius
size
Border radius for elements.
0px
--selectable-vertical-list-element-height
size
Height of elements.
auto
--selectable-vertical-list-padding
size
Padding for the list.
0px
--selectable-vertical-list-title-font-size
size
Font size for titles.
1.2rem
--selectable-vertical-list-description-font-size
size
Font size for descriptions.
.875rem

Slots

elementSnippet

Custom template for an element.

Default content:

{#if !!element.icon}
  <Icon
    name={element.icon}
  ></Icon>
{/if}
<div class="title-description-container" class:centered>
  <div class="title">
    {#if titleSnippet}
      {@render titleSnippet({ 
        focused: focused == element.name,
        selected: selected == element.name,
        element
      })}
    {:else}
      {element.title}
    {/if}
  </div>
  {#if !!element.description}
    <div class="description">
      {#if descriptionSnippet}
        {@render descriptionSnippet({ 
          focused: focused == element.name,
          selected: selected == element.name,
          element
        })}
      {:else}
        {element.description || ''}
      {/if}
    </div>
  {/if}
</div>
{#if !!element.appendIcon}
  <div
    role="button"
    tabindex="0"
    class="append"
    onclick={(e) => {
      e.stopPropagation()
      handleIconClick(index, element)
    }}
    {onkeypress}
  >
    <Icon
      name={element.appendIcon}
      --icon-size={appendIconSize}
    ></Icon>
  </div>
{/if}
    

Available variables:

Name	Type	Description
selected	boolean	Whether the element is selected.
focused	boolean	Whether the element is focused.

titleSnippet

Custom template for the element title.

Default content:

{element.title}

Available variables:

Name	Type	Description
selected	boolean	Whether the element is selected.
focused	boolean	Whether the element is focused.
element	Element	The element being rendered.

descriptionSnippet

Custom template for the element description.

Default content:

{element.description || ""}

Available variables:

Name	Type	Description
selected	boolean	Whether the element is selected.
focused	boolean	Whether the element is focused.
element	Element	The element being rendered.

Events

onselect

Triggered when an element is selected.

Attribute	Type	Description
element	Element	The selected element.

onfocus

Triggered when an element gains focus.

Attribute	Type	Description
element	Element	The focused element.

oniconClick

Triggered when an appended icon is clicked.

Attribute	Type	Description
index	number	Index of the clicked element.
element	Element	The element whose icon was clicked.

onkeypress

Handles keypress events.

Attribute	Type	Description
event	KeyboardEvent	The keypress event.