VibeUI
РусEng
Войти

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

Меню заказа

Радиогруппа сортировки по одному полю за кнопкой-иконкой: без второй группы направления, а рекомендованное поле помечено бейджем.

React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.

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

  • выбранное поле через value и список полей через fields
  • рекомендованное поле через recommended и подпись бейджа через recommendedText
  • реакцию на выбор через onChange

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

Превью

1440pxТема страницы
Меню заказа — Радиогруппа сортировки по одному полю за кнопкой-иконкой: без второй группы направления, а рекомендованное поле помечено бейджем.

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

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

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

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

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

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

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

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

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

Как использовать

<Dropdown017
  value="Дата создания"
  fields={["Дата создания", "Название", "Приоритет"]}
  recommended="Дата создания"
/>

Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».

Настройки

Поле
value · по умолчанию: Дата создания
Акцент
accent · по умолчанию: цвет темы
Фон
background · по умолчанию: цвет темы

Ещё в разделе «Выпадающие меню»

Частые вопросы

Как установить компонент «Меню заказа» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Меню заказа»?
Никаких npm-пакетов, кроме React и Tailwind CSS.
Что можно поменять в компоненте «Меню заказа»?
Можно менять: выбранное поле через value и список полей через fields; рекомендованное поле через recommended и подпись бейджа через recommendedText; реакцию на выбор через onChange. Сохранить как есть: локальную палитру --vibeui-dropdown-017-*: компонент обязан выглядеть одинаково в любом проекте; роль menuitemradio с aria-checked и обёртку role=group — это выбор одного варианта, а не список команд; aria-label кнопки, собранный из текущего значения — иконка без текста молчит для скринридера без него.
Компонент «Меню заказа» бесплатный?
Да. Превью открыто без регистрации, а с бесплатным аккаунтом можно скопировать до 20 компонентов в месяц.

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

npx shadcn@latest add https://vibeui.ru/r/pro/dropdown-017.json

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

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

Один файл, ноль зависимостей, палитра --vibeui-dropdown-017-*. Клиентский: выбранное поле держит useState, aria-expanded синхронизирован с событием toggle. Кнопка-триггер — иконка без текста с aria-label, собранным из текущего значения; подпись поля стоит рядом отдельным узлом, поэтому компонент годится для тесной панели инструментов. Пункты размечены role=menuitemradio с aria-checked внутри role=group с aria-labelledby на заголовок «Сортировать по». Рекомендованное поле несёт бейдж вместо галочки, пока не выбрано; после выбора бейдж уступает место галочке. Стрелка вниз с кнопки открывает меню и ставит фокус на выбранный пункт.

Теги

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

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

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