Тема
SListItem
Обзор
Строка списка для SList.
Usage
API
Краткий справочник props, slots и events — см. API Reference.
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 |
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). | — |
События
| Имя | Описание | 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 |