Выпадающее меню

Массовые действия

Меню массовых действий над таблицей: оно знает, сколько строк выбрано, гасит неприменимое и выключается, когда выделения нет.

Что можно поменять

  • заголовок панели через title
  • подпись кнопки меню через actionLabel
  • состав строк через rows

Ссылка для ИИ-агента: в ней превью, код и инструкция.

Превью

1440pxТема страницы

Использовать с ИИ

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из реестра.
AI
1Выбрали здесь

добавь это на главную первым экраном:

https://vibeui.ru/c/dropdown-012?theme=dark

2Вставили в чат агента
3Получили в проекте

Не знаете, куда вставить? Пошаговый гайд

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

Загружается…

Для разработчика

Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.

Технические заметки

Один файл, ноль зависимостей, палитра --vibeui-dropdown-012-*. Клиентский: выделение строк держит useState. Шапка выделения показывает счётчик через role=status, кнопка меню помечена disabled при пустом выборе — исчезающая кнопка сдвигала бы шапку. Пункт «переименовать» помечен aria-disabled, когда выбрано не ровно одно: он остаётся видимым и объясняет причину подписью. Строки — обычные label с чекбоксом, подсветка выбранной строки сделана через :has(input:checked). Меню — HTML popover с якорным позиционированием под @supports, опасный пункт отделён линией и несёт число строк.

Теги

  • menu
  • dropdown
  • table
  • bulk
Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

Загружается…