Tree Item
<sf-tree-item> — один пункт дерева:
папка с вложенными пунктами, файл или ссылка на раздел. Пункты ставят внутрь
<sf-tree>: дерево даёт им общий порядок фокуса, клавиатуру и выбор.
Оформление совпадает с обычным пунктом дерева.
Пример
Применение
Подпись и ссылка
label — подпись пункта; без неё подписью служит текст внутри
<sf-tree-item>. href делает подпись ссылкой, target и rel переходят
на неё. value — машинное значение, которое приходит в событиях дерева.
Папка или файл
kind — folder (по умолчанию) или file. Папка с вложенными
<sf-tree-item> получает кнопку раскрытия и иконку открытой или закрытой
папки, файл — иконку документа и никогда не раскрывается. Вложенный пункт
из разметки может потерять kind, когда <sf-tree> перерисовывает его,
поэтому дерево с файлами передавайте данными, как в
примере Tree.
open-icon и closed-icon заменяют иконки папки, chevron-open-icon и
chevron-closed-icon — стрелку раскрытия. icon="false" убирает иконку
пункта: так выглядит дерево разделов, а не файлов, как в примере.
Состояние
open раскрывает ветвь. selected отмечает выбранный пункт, если дерево
разрешает выбор. active выделяет пункт текущей страницы и ставит ему
aria-current="page". disabled выключает пункт: он не раскрывается, его
ссылка не рисуется, а нажатие ничего не делает.
Методы и события
open(), close(), toggle() и setOpen(bool) раскрывают и сворачивают
ветвь и отправляют sf-tree-item-toggle с detail.open, detail.item и
detail.value; пункт без вложенных не раскрывается. onToggle(handler)
передаёт обработчику новое состояние первым аргументом. activate()
открывает ссылку пункта или, если её нет, отправляет sf-tree-item-click.
focusItem() переводит фокус на пункт.
const section = document.querySelector('sf-tree-item[value="reports"]');
section.onToggle((open) => {
if (open) loadReports();
});
section.open();
Доступность
- Пункт — элемент дерева (
treeitem), его доступное имя — подпись. - Фокус между пунктами переводит дерево стрелками; на странице
Tabостанавливается на одном пункте дерева. Кнопка раскрытия и ссылка внутри пункта не получают отдельной остановкиTab. - Кнопка раскрытия сообщает
aria-expanded. Её доступное имя по умолчанию английское: на русской странице задавайтеopen-labelиclose-label, как в примере. - Недоступный пункт сообщает
aria-disabled="true", пункт текущей страницы —aria-current="page".
Справочник API
Раздел собран из манифеста компонента выпуска ui-106d5901f8c3 и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест.
Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: search-placeholder — searchPlaceholder. Свойство атрибута template называется templateName.
| Тег | <sf-tree-item> |
| Назначение | Один доступный узел иерархии Smart Tree. |
| Контракт | smart.tree-item, версия 1.0.0 |
| Поставка | выпуск Framework ui-106d5901f8c3 |
| Жизненный цикл | экспериментальный: API может меняться между выпусками |
| Готовность | описан: манифест и сценарий есть, продуктовой приёмки нет |
| Заготовка до прихода кода | сервер пишет data-sf-skeleton="line"; своего скелетона при загрузке данных нет (Заготовка до прихода кода) |
Атрибуты
template—string, по умолчаниюdefault.label—string, по умолчанию пусто.text—string, по умолчанию пусто.href—string, по умолчанию пусто.target—string, по умолчанию пусто.rel—string, по умолчанию пусто.kind—string, по умолчаниюfolder, значения:folder,file. Тип элемента дерева: папка или файл.value—string, по умолчанию пусто.open—boolean, по умолчаниюfalse.selected—boolean, по умолчаниюfalse.active—boolean, по умолчаниюfalse.disabled—boolean, по умолчаниюfalse.items-data—array, по умолчанию[].open-icon—string, по умолчаниюfolder_open.closed-icon—string, по умолчаниюfolder.icon—boolean, по умолчаниюtrue.chevron-open-icon—string, по умолчаниюkeyboard_arrow_down.chevron-closed-icon—string, по умолчаниюchevron_right.open-label—string, по умолчанию пусто. Пусто — текст на языке страницы (по-английски «Open item»).close-label—string, по умолчанию пусто. Пусто — текст на языке страницы (по-английски «Close item»).root-class—string, по умолчанию пусто.item-class—string, по умолчанию пусто.container-class—string, по умолчанию пусто.name-class—string, по умолчанию пусто.
Прежние имена:
| Имя | Прежнее имя | Состояние | Убирается после |
|---|---|---|---|
kind |
type |
работает, отмечается в SF.deprecations |
2026-12-01 |
Методы
setOpen(open?: boolean)— возвращаетobject. Открывает или закрывает ветку и отправляет sf-tree-item-toggle; ничего не делает для файла, листа, отключённого пункта или неизменного состояния.open()— возвращаетobject. То же, что setOpen(true).close()— возвращаетobject. То же, что setOpen(false).focusItem()— возвращаетobject. Переносит фокус DOM на этот элемент дерева.activate()— возвращаетobject. Активирует ссылку элемента или генерирует событие щелчка по элементу.toggle()— возвращаетobject. Переключает состояние открытия через setOpen.onToggle(handler: function, options?: object|boolean)— возвращаетobject. Добавляет обработчик sf-tree-item-toggle; обработчик вызывается с (open, detail, event). Обработчик, не являющийся функцией, игнорируется.
События
Все события приходят на сам элемент и всплывают. Общие события базового элемента перечислены в главе Жизненный цикл → Этапы.
sf-tree-item-click—detail:{ component: object, tagName: string, template: string, item: object, value: string, originalEvent: object|null }.sf-tree-item-toggle—detail:{ component: object, tagName: string, template: string, item: object, open: boolean, value: string }.
Доступность
- Роль: элемент дерева (
treeitem). - Доступное имя: обязательно.
- Клавиши:
ArrowUp,ArrowDown,ArrowLeft,ArrowRight,Home,End,Enter,Space. - Фокус: Дерево управляет перемещаемым фокусом (roving focus); раскрытие, фокус и выбор независимы.
Минимальная разметка
<sf-tree-item></sf-tree-item>
Источник
simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/smart/tree-itemsimai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/rule/rule.json#name=cl-tree-item
См. также
- Tree — дерево, клавиатура и выбор.