Деревья и перетаскивание
Дерево с меню узла
Дерево, где действия живут на самом узле: правый клик по строке или кнопка «⋯» открывают меню узла — переименовать, дублировать, удалить.
React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.
Что можно поменять
- заголовок дерева через label и структуру через nodes
- набор пунктов меню через actions: подпись, горячие клавиши и признак danger
- шаблон строки hint с подстановками {action} и {name}
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/tree-011?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Как использовать
<Tree011
label="Файлы проекта"
nodes={[{ name: "Проект «Север»", children: [{ name: "Смета.xlsx" }] }]}
/>Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».
Настройки
- Заголовок
label· по умолчанию: Файлы проекта- Подсказка
hint· по умолчанию: Правый клик по строке или «⋯». Выбрано: {action} — {name}.- Акцент
accent· по умолчанию: цвет темы- Фон
background· по умолчанию: цвет темы
Ещё в разделе «Деревья и перетаскивание»
Частые вопросы
- Как установить компонент «Дерево с меню узла» через Cursor или Claude Code?
- Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
- Какие зависимости у компонента «Дерево с меню узла»?
- Никаких npm-пакетов, кроме React и Tailwind CSS.
- Что можно поменять в компоненте «Дерево с меню узла»?
- Можно менять: заголовок дерева через label и структуру через nodes; набор пунктов меню через actions: подпись, горячие клавиши и признак danger; шаблон строки hint с подстановками {action} и {name}. Сохранить как есть: локальную палитру --vibeui-tree-011-* и не подменять её токенами вашей темы; кнопку «⋯» рядом с правым кликом: правого клика нет ни на тач-экране, ни у части клавиатурных сценариев; HTML popover под меню: Escape и клик мимо написаны браузером, своя реализация чинится месяцами.
- Компонент «Дерево с меню узла» бесплатный?
- Да. Превью открыто без регистрации, а с бесплатным аккаунтом можно скопировать до 20 компонентов в месяц.
Для разработчика
npx shadcn@latest add https://vibeui.ru/r/pro/tree-011.jsonКоманде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки
Технические заметки
Клиентский компонент: список раскрытых веток, узел-цель и последнее выбранное действие лежат в 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
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…