Дерево
Дерево с меню узла
Дерево, где действия живут на самом узле: правый клик по строке или кнопка «⋯» открывают меню узла — переименовать, дублировать, удалить.
Что можно поменять
- заголовок дерева через label и структуру через nodes
- набор пунктов меню через actions: подпись, горячие клавиши и признак danger
- шаблон строки hint с подстановками {action} и {name}
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/tree-011?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Клиентский компонент: список раскрытых веток, узел-цель и последнее выбранное действие лежат в useState. Один файл, без зависимостей, палитра в локальных переменных --vibeui-tree-011-*. Меню — HTML popover, поэтому закрытие по Escape и по клику мимо достаются от браузера; координаты курсора известны только в момент события и подставляются переменными --vibeui-tree-011-x и --vibeui-tree-011-y. Правый клик ловится обработчиком onContextMenu на строке — тот же обработчик срабатывает и на клавише вызова меню, поэтому меню доступно без мыши. Для тача у каждой строки есть кнопка «⋯»: она открывает то же меню под собой. Имя узла стоит в шапке меню и в его aria-label, иначе после промаха человек переименует не то. Дерево размечено вложенными списками, а раскрытие ветки — кнопкой с aria-expanded: роль tree требует переноса фокуса стрелками, и без него она врёт скринридеру. Проп open разворачивает меню в потоке — это режим витрины и скриншотов.
Теги
- tree
- context-menu
- popover
- files
- client
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…