List Item

Гнучкий елемент списку з необов'язковими крайовими слотами start/end, підтримкою вибору та іконок. Ідеально підходить для списків опцій, меню та груп елементів з вибором.

Живе демо

Простий елемент

Панель керування

З іконкою на початку

Вхідні

З іконкою в кінці

Налаштування

З іконками з обох боків

Способи оплати

З вибором

Сповіщення електронною поштою

Сповіщення в чаті

Сповіщення телефоном

Вибрано: Пошта: false, Чат: false, Телефон: false

З вибором і власним слотом start

Коли selectable дорівнює true, слот start за замовчуванням показує чекбокс. Його можна перевизначити:

Власна іконка на початку (перемикання працює)

Використання

Базове

<orio-list-item>
  Simple text item
</orio-list-item>

З іконкою на початку

<orio-list-item>
  <template #start>
    <orio-icon name="mail" />
  </template>
  Inbox
</orio-list-item>

З іконкою в кінці

<orio-list-item>
  Settings
  <template #end>
    <orio-icon name="chevron-right" />
  </template>
</orio-list-item>

З іконками з обох боків

<orio-list-item>
  <template #start>
    <orio-icon name="credit-card" />
  </template>
  Payment Methods
  <template #end>
    <orio-icon name="external-link" />
  </template>
</orio-list-item>

З вибором через v-model

<script setup>
const selected = ref(false);
</script>

<template>
  <orio-list-item selectable v-model:selected="selected">
    Toggle me
  </orio-list-item>
</template>

Пропси

Проп	Тип	За замовчуванням	Опис
selectable	boolean	false	Вмикає перемикання кліком і за замовчуванням показує чекбокс у слоті start

Модель

Модель	Тип	Опис
selected	boolean	Двобічне зв'язування стану вибору. Використовуйте v-model:selected

Слоти

Слот	Опис
default	Основний вміст елемента списку
start	Лівий край — показується, якщо переданий або коли selectable дорівнює true (за замовчуванням чекбокс)
end	Правий край — рендериться лише якщо переданий

Стилізація

--color-accent         /* Selected item background */
--color-accent-soft-darker  /* Selected item text color */
--color-surface        /* Hover background (non-selected) */