Menu
Described Items
Меню создания, где под каждым пунктом стоит строка пояснения: «доска» и «таблица» звучат одинаково важно, пока не сказано, для чего они.
- menu
- dropdown
- description
- create
Превью
1440pxHost theme
Использовать с AI
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из registry.
размести это в шапке: https://vibeui.ru/c/dropdown-010
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
# Установка и размещение «dropdown-010» (Described Items) из VibeUI
## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/dropdown-010.json
Registry item: https://vibeui.ru/r/dropdown-010.json
Ставится в: components/vibeui/dropdown-010.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.
Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.
## 2. Что это
Меню создания, где под каждым пунктом стоит строка пояснения: «доска» и «таблица» звучат одинаково важно, пока не сказано, для чего они.
Меню, где у пункта две строки: название и пояснение, связанное с ним через aria-describedby. Один файл, ноль зависимостей.
## 3. Как использовать
import { Dropdown010 } from "@/components/vibeui/dropdown-010"
<Dropdown010
trigger="Создать"
menuWidth={18}
items={[{ label: "Доска", hint: "Карточки в колонках", glyph: "▤" }]}
/>
Полный список пропсов — в установленном файле.
## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.
Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)
## 5. Сохранить как установлено
- локальную палитру --vibeui-dropdown-010-*: компонент обязан выглядеть одинаково в любом проекте
- грид в пункте: значок обязан занимать обе строки, иначе пояснение подтекает под него
- связь пояснения с пунктом через aria-describedby — иначе скринридер прочитает его отдельным текстом
- ширину меню в переменной: пояснение в две строки на 12rem читать невозможно
- пояснение одной короткой фразой: абзац в меню никто не читает
- собственную светлую подложку: на тёмной карточке каталога тёмный текст пропадает
## 6. Можно менять
- подпись кнопки через trigger
- ширину меню через menuWidth
- состав пунктов, пояснений и значков через items
- цвет кнопки и фокуса через accent
## 7. Правила
- Значок — текстовый символ: чтобы поставить SVG, замените содержимое узла badge, сетка не изменится.
- Пунктов больше шести — меню становится страницей выбора, лучше показать диалог.
- menuWidth задан в rem: на очень узком экране меню всё равно упрётся в края, проверьте на телефоне.
- Не выносите CSS-переменные в globals.css: компонент обязан остаться одним файлом.
## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.Для разработчика
npx shadcn@latest add https://vibeui.ru/r/dropdown-010.jsonhttps://vibeui.ru/r/dropdown-010.jsonОдин файл, ноль зависимостей, палитра --vibeui-dropdown-010-*. Клиентский только ради навигации стрелками. Пункт собран гридом: значок занимает обе строки, справа название и пояснение, поэтому текст не наезжает на иконку при переносе. Пояснение связано с пунктом через aria-describedby, а не просто лежит рядом. Ширину меню задаёт переменная --vibeui-dropdown-010-width из пропса menuWidth: пояснение в две строки на узком меню превращается в кашу. Открытие — HTML popover, положение — anchor-name и position-area под @supports.
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
"use client"
import { useId, useRef } from "react"
import type {
ComponentPropsWithoutRef,
CSSProperties,
KeyboardEvent,
} from "react"
export type Dropdown010Item = {
label: string
hint: string
glyph: string
}
export type Dropdown010Props = Omit<
ComponentPropsWithoutRef<"div">,
"children"
> & {
trigger?: string
menuWidth?: number
items?: Dropdown010Item[]
accent?: string
}
// Идея компонента: пункт из двух строк — название и пояснение под ним. Меню
// создания сущностей нельзя описать одним словом: «доска» и «таблица» звучат
// одинаково важно, пока не сказано, для чего каждая. Ширина меню задаётся
// переменной, потому что пояснение в две строки на 12rem превращается в кашу.
// Пояснение связано с пунктом через aria-describedby, а не просто лежит рядом.
const STYLES = `
:where([data-vibeui-block="dropdown-010"]){
--vibeui-dropdown-010-bg:oklch(1 0 0);
--vibeui-dropdown-010-fg:oklch(0.24 0.014 265);
--vibeui-dropdown-010-muted:oklch(0.55 0.014 265);
--vibeui-dropdown-010-border:oklch(0.9 0.006 265);
--vibeui-dropdown-010-hover:oklch(0.96 0.004 265);
--vibeui-dropdown-010-accent:oklch(0.55 0.16 190);
--vibeui-dropdown-010-width:18rem;
--vibeui-dropdown-010-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="dropdown-010"]{
display:inline-flex;box-sizing:border-box;padding:0.4375rem;
background:var(--vibeui-dropdown-010-bg);color:var(--vibeui-dropdown-010-fg);
border:1px solid var(--vibeui-dropdown-010-border);border-radius:0.875rem;
font-family:var(--vibeui-dropdown-010-font);
}
[data-vibeui-block="dropdown-010"] [data-part="trigger"]{
appearance:none;cursor:pointer;
display:inline-flex;align-items:center;gap:0.4375rem;
height:2.125rem;padding:0 0.875rem;
border:0;border-radius:0.625rem;
background:var(--vibeui-dropdown-010-accent);color:oklch(0.99 0 0);
font:inherit;font-size:0.8125rem;font-weight:650;
anchor-name:--vibeui-dropdown-010-anchor;
transition:filter .16s ease;
}
[data-vibeui-block="dropdown-010"] [data-part="trigger"]:hover{filter:brightness(1.07)}
[data-vibeui-block="dropdown-010"] [data-part="trigger"]:focus-visible{outline:2px solid var(--vibeui-dropdown-010-accent);outline-offset:2px}
[data-vibeui-block="dropdown-010"] [data-part="plus"]{font-size:1rem;line-height:1;margin-top:-0.0625rem}
[data-vibeui-block="dropdown-010"] [data-part="menu"]{
position:fixed;padding:0.375rem;box-sizing:border-box;
width:var(--vibeui-dropdown-010-width);
background:var(--vibeui-dropdown-010-bg);color:var(--vibeui-dropdown-010-fg);
border:1px solid var(--vibeui-dropdown-010-border);border-radius:0.875rem;
box-shadow:0 20px 44px -24px oklch(0.2 0.03 265 / 50%);
font-family:var(--vibeui-dropdown-010-font);
opacity:0;transform:translateY(-0.25rem);
transition:opacity .14s ease,transform .14s ease,display .14s allow-discrete,overlay .14s allow-discrete;
}
[data-vibeui-block="dropdown-010"] [data-part="menu"]:popover-open{opacity:1;transform:none}
@starting-style{[data-vibeui-block="dropdown-010"] [data-part="menu"]:popover-open{opacity:0;transform:translateY(-0.25rem)}}
@supports (anchor-name: --a){
[data-vibeui-block="dropdown-010"] [data-part="menu"]{
position-anchor:--vibeui-dropdown-010-anchor;
position-area:bottom span-right;margin:0.375rem 0 0;
position-try-fallbacks:flip-block,flip-inline;
}
}
/* Две строки в пункте: иконка занимает обе, поэтому сетка, а не флекс. */
[data-vibeui-block="dropdown-010"] [data-part="item"]{
display:grid;grid-template-columns:1.75rem 1fr;grid-template-rows:auto auto;
column-gap:0.625rem;row-gap:0.125rem;align-items:start;
width:100%;box-sizing:border-box;
appearance:none;border:0;background:none;cursor:pointer;
padding:0.5rem;border-radius:0.625rem;
font:inherit;color:inherit;text-align:left;
transition:background-color .14s ease;
}
[data-vibeui-block="dropdown-010"] [data-part="item"]:hover{background:var(--vibeui-dropdown-010-hover)}
[data-vibeui-block="dropdown-010"] [data-part="item"]:focus-visible{outline:2px solid var(--vibeui-dropdown-010-accent);outline-offset:-2px}
[data-vibeui-block="dropdown-010"] [data-part="badge"]{
grid-row:1 / span 2;
display:flex;align-items:center;justify-content:center;
width:1.75rem;height:1.75rem;border-radius:0.5rem;
background:color-mix(in oklab,var(--vibeui-dropdown-010-accent) 14%,transparent);
font-size:0.875rem;line-height:1;
}
[data-vibeui-block="dropdown-010"] [data-part="label"]{font-size:0.8125rem;font-weight:650;line-height:1.25}
[data-vibeui-block="dropdown-010"] [data-part="hint"]{
font-size:0.75rem;line-height:1.35;color:var(--vibeui-dropdown-010-muted);
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="dropdown-010"] *{animation:none!important;transition:none!important}}
`
const DEFAULT_ITEMS: Dropdown010Item[] = [
{
label: "Документ",
hint: "Текст с заголовками и картинками, как страница вики",
glyph: "¶",
},
{
label: "Таблица",
hint: "Строки с полями: статус, срок, ответственный",
glyph: "▦",
},
{
label: "Доска",
hint: "Карточки в колонках, которые тянут мышью",
glyph: "▤",
},
{
label: "Импорт",
hint: "Забрать содержимое из Notion, CSV или Markdown",
glyph: "↧",
},
]
function stepFocus(menu: HTMLElement | null, delta: number) {
if (!menu) {
return
}
const items = Array.from(
menu.querySelectorAll<HTMLElement>('[data-part="item"]'),
)
if (items.length === 0) {
return
}
const from = items.indexOf(document.activeElement as HTMLElement)
items[(from + delta + items.length) % items.length].focus()
}
/**
* Меню с пояснением под каждым пунктом: название и строка описания.
* Один файл, ноль зависимостей, собственная палитра.
*/
export function Dropdown010({
trigger = "Создать",
menuWidth = 18,
items = DEFAULT_ITEMS,
accent,
className,
style,
...props
}: Dropdown010Props) {
const id = useId()
const menu = useRef<HTMLDivElement>(null)
const palette = {
"--vibeui-dropdown-010-width": `${menuWidth}rem`,
...(accent ? { "--vibeui-dropdown-010-accent": accent } : null),
...style,
} as CSSProperties
return (
<>
<style href="vibeui-dropdown-010" precedence="medium">
{STYLES}
</style>
<div
{...props}
data-vibeui-block="dropdown-010"
className={className}
style={palette}
>
<button
type="button"
data-part="trigger"
popoverTarget={`${id}-menu`}
aria-haspopup="menu"
onKeyDown={(event) => {
if (event.key === "ArrowDown") {
event.preventDefault()
const node = menu.current
if (node) {
if (!node.matches(":popover-open")) {
node.showPopover()
}
requestAnimationFrame(() =>
node
.querySelector<HTMLElement>('[data-part="item"]')
?.focus(),
)
}
}
}}
>
<span data-part="plus" aria-hidden="true">
+
</span>
{trigger}
</button>
<div
id={`${id}-menu`}
ref={menu}
popover="auto"
role="menu"
aria-label={trigger}
data-part="menu"
style={palette}
onKeyDown={(event: KeyboardEvent<HTMLDivElement>) => {
if (event.key === "ArrowDown") {
event.preventDefault()
stepFocus(menu.current, 1)
} else if (event.key === "ArrowUp") {
event.preventDefault()
stepFocus(menu.current, -1)
}
}}
>
{items.map((item, index) => (
<button
key={item.label}
type="button"
role="menuitem"
data-part="item"
aria-describedby={`${id}-hint-${index}`}
onClick={() => menu.current?.hidePopover()}
>
<span data-part="badge" aria-hidden="true">
{item.glyph}
</span>
<span data-part="label">{item.label}</span>
<span data-part="hint" id={`${id}-hint-${index}`}>
{item.hint}
</span>
</button>
))}
</div>
</div>
</>
)
}