Тема
SListItem
Обзор
Строка списка для SList.
Usage
API
Краткий справочник props, slots и events — см. API Reference.
Guide
Props
Прозрачный фон
По умолчанию строка лежит на surface-primary. Если список стоит на другой подложке (например, сайдбар на surface-secondary), задайте transparent: обычная, disabled и readonly строки становятся прозрачными, а hover, нажатие, выбор и billing-оформление красятся как обычно.
vue
<SListItem title="Главная" icon-left="home" transparent />
<SListItem title="Проекты" icon-left="page" transparent selected />API Reference
Свойства
| Имя | Тип | Описание | По умолчанию |
|---|---|---|---|
depth | number | Уровень вложенности для отступа слева. | 0 |
hasLevel | boolean | Всегда рендерить колонку уровня (14px), даже при depth: 0 без expandable — как hasLevel в Figma. | false |
expandable | boolean | Показывает кнопку раскрытия дерева. | false |
expanded | boolean | Раскрыта ли ветка. | false |
variant | ESListItemVariant | Семантический цвет строки. | 'neutral' |
tiny | boolean | Компактная высота строки (32px). | false |
compact | boolean | Строка 28px под текст без иконки и уровня; приоритетнее tiny. | false |
flush | boolean | Поверхность строки вровень с её боксом: без 2px ring-gap по бокам. | false |
transparent | boolean | Прозрачный фон в обычном, disabled и readonly состояниях — для строк на цветной подложке; hover, нажатие и выбор красятся как обычно. | false |
selected | boolean | Выбранная строка. | false |
active | boolean | Активная строка (фокус/навигация). | false |
disabled | boolean | Отключает взаимодействие. | false |
readonly | boolean | Только чтение без стиля disabled. | false |
loading | boolean | Скелетон вместо контента. | false |
title | string | Заголовок; для своей разметки — слот title. | — |
subtitle | string | Подзаголовок; для своей разметки — слот subtitle. | — |
iconLeft | TSIconName | Иконка слева; для своей разметки — слот icon-left. | — |
iconLeftSize | TSListItemIconSize | Размер иконки слева и её бокса; по умолчанию 16 (внутри меню SSelect — 20). | — |
rowKey | string | Стабильный ключ строки. | — |
revealRight | boolean | Показывать правую колонку при наведении. | — |
expandOnClick | boolean | Клик по строке сворачивает/разворачивает ветку (работает при expandable). | — |
role | TSListItemRole | ARIA-роль строки; по умолчанию option/treeitem внутри SList, menuitem в панели-меню SDropdown и button в остальных случаях. ARIA-состояния строки (aria-selected, aria-checked, aria-expanded, aria-level) выставляются только там, где роль их допускает. | — |
События
| Имя | Описание | Payload |
|---|---|---|
click | Клик по строке списка. | MouseEvent |
toggleExpand | Переключение состояния expand/collapse у tree-элемента. | — |
keydown | Нажатие клавиши на строке. | KeyboardEvent |
Слоты
| Имя | Описание |
|---|---|
level | Колонка отступа/кнопки раскрытия дерева |
icon-left | Иконка слева; по умолчанию SIcon из prop iconLeft |
title | Заголовок строки |
subtitle | Подзаголовок строки |
title-action | Действие в зоне заголовка; scope: disabled, readonly |
trailing | Элементы перед правой колонкой; scope: disabled, readonly |
right | Основная правая колонка; scope: disabled, readonly |
action-end | Крайняя правая зона; scope: disabled, readonly |