VibeUI

Feedback

Action Drawer

Список действий, выезжающий снизу под большой палец: на телефоне контекстное меню у края экрана недостижимо, а крупные строки — да.

  • drawer
  • action sheet
  • mobile
  • dialog

Превью

1440pxHost theme

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

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

размести это в шапке: https://vibeui.ru/c/drawer-002

Проект «Витрина»

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

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

# Установка и размещение «drawer-002» (Action Drawer) из VibeUI

## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/drawer-002.json

Registry item: https://vibeui.ru/r/drawer-002.json
Ставится в: components/vibeui/drawer-002.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.

Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.

## 2. Что это
Список действий, выезжающий снизу под большой палец: на телефоне контекстное меню у края экрана недостижимо, а крупные строки — да.

Нижний ящик действий: ручка, подпись объекта, крупные строки действий и отдельная кнопка отмены под ними. Держится на нативном модальном dialog, поэтому ловушка фокуса, затемнение и Escape достаются от браузера. Ноль зависимостей, один файл, своя палитра.

## 3. Как использовать
import { Drawer002 } from "@/components/vibeui/drawer-002"

<Drawer002
  triggerLabel="Действия"
  title="Проект «Витрина»"
  actions={[{ label: "Переименовать" }, { label: "Удалить", tone: "danger" }]}
/>

Полный список пропсов — в установленном файле.

## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.

Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)

## 5. Сохранить как установлено
- локальную палитру --vibeui-drawer-002-* и не подменять её токенами вашей темы: ящик обязан выглядеть одинаково в любом проекте
- нативный dialog с showModal: ловушка фокуса, затемнение и Escape стоят сотен строк, если писать их руками
- высоту строки не меньше 3.25rem: лист живёт под большим пальцем, а не под курсором
- отдельную карту «Отмена» с зазором: промах по ней должен быть безопасным, а не попадать в удаление
- подпись объекта над списком — иначе непонятно, к чему относятся действия
- опасное действие тоном, а не только текстом: цвет предупреждает раньше, чем прочитано слово

## 6. Можно менять
- title — подпись объекта над списком и имя ящика для скринридера
- массив actions: подпись, пояснение hint и тон каждого действия
- triggerLabel и cancelLabel — подписи кнопки-триггера и отмены
- обработчики: сейчас строки только закрывают лист, действие вешает вызывающий код
- радиусы и ширину карт через переменные палитры

## 7. Правила
- Больше шести строк в списке — уже меню, а не быстрые действия: остальное убирайте на страницу объекта.
- Опасное действие не должно быть первым в списке: палец попадает по верхней строке чаще всего.
- Ручка обещает жест, но перетаскивание не реализовано — добавьте обработчик, если ждёте свайп.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.

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

npx shadcn@latest add https://vibeui.ru/r/drawer-002.json
https://vibeui.ru/r/drawer-002.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-drawer-002-*. Клиентский: "use client" — нужен ref для showModal и close. Ящик прижат к низу нативным dialog с явным inset, поэтому margin:auto не требуется. Escape и клик по затемнению закрывают лист: первое даёт браузер, второе — сравнение event.target с самим dialog. Карта действий и кнопка отмены разделены зазором, у опасного действия свой тон через data-tone.

Исходник компонента

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

"use client"

import { useRef } from "react"
import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Drawer002Action = {
  label: string
  hint?: string
  tone?: "neutral" | "danger"
}

export type Drawer002Props = Omit<
  ComponentPropsWithoutRef<"div">,
  "children" | "title"
> & {
  triggerLabel?: string
  title?: string
  actions?: Drawer002Action[]
  cancelLabel?: string
  accent?: string
}

// Идея компонента: список действий, выезжающий снизу под большой палец.
// На телефоне контекстное меню у края экрана недостижимо, поэтому действия
// переезжают вниз крупными строками. Ручка сверху обещает жест, а нижняя
// кнопка «Отмена» отделена промежутком: промах по ней ничего не стоит.
const STYLES = `
:where([data-vibeui-block="drawer-002"]){
--vibeui-drawer-002-bg:oklch(1 0 0);
--vibeui-drawer-002-fg:oklch(0.21 0.014 265);
--vibeui-drawer-002-muted:oklch(0.55 0.014 265);
--vibeui-drawer-002-border:oklch(0.91 0.006 265);
--vibeui-drawer-002-accent:oklch(0.55 0.17 265);
--vibeui-drawer-002-danger:oklch(0.55 0.2 25);
--vibeui-drawer-002-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="drawer-002"]{
display:inline-block;font-family:var(--vibeui-drawer-002-font);color:var(--vibeui-drawer-002-fg);
}
[data-vibeui-block="drawer-002"] [data-part="trigger"]{
appearance:none;cursor:pointer;
height:2.25rem;padding:0 0.875rem;
border:1px solid var(--vibeui-drawer-002-border);border-radius:0.625rem;
background:var(--vibeui-drawer-002-bg);color:inherit;
font:inherit;font-size:0.8125rem;font-weight:600;
}
[data-vibeui-block="drawer-002"] [data-part="trigger"]:focus-visible{outline:2px solid var(--vibeui-drawer-002-accent);outline-offset:2px}
/* Ящик прижат к низу и не занимает экран целиком: сверху видно страницу. */
[data-vibeui-block="drawer-002"] dialog{
position:fixed;inset:auto 0 0 0;margin:0;
width:100%;max-width:100vw;max-height:85dvh;
padding:0;border:0;background:transparent;color:inherit;overflow:visible;
translate:0 100%;transition:translate .24s ease,overlay .24s allow-discrete,display .24s allow-discrete;
}
[data-vibeui-block="drawer-002"] dialog[open]{translate:0 0}
@starting-style{
[data-vibeui-block="drawer-002"] dialog[open]{translate:0 100%}
}
[data-vibeui-block="drawer-002"] dialog::backdrop{background:oklch(0.19 0.02 265 / 48%)}
[data-vibeui-block="drawer-002"] [data-part="panel"]{
display:flex;flex-direction:column;gap:0.5rem;box-sizing:border-box;
padding:0.375rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom,0px));
}
[data-vibeui-block="drawer-002"] [data-part="card"]{
display:flex;flex-direction:column;
background:var(--vibeui-drawer-002-bg);border-radius:1rem;
box-shadow:0 -18px 50px -28px oklch(0.2 0.02 265 / 60%);
overflow:hidden;
}
/* Ручка — обещание жеста: без неё лист выглядит окном, приклеенным к низу. */
[data-vibeui-block="drawer-002"] [data-part="grabber"]{
align-self:center;width:2.5rem;height:0.25rem;margin:0.625rem 0 0.25rem;
border-radius:9999px;background:var(--vibeui-drawer-002-border);flex:none;
}
[data-vibeui-block="drawer-002"] [data-part="title"]{
margin:0;padding:0.375rem 1rem 0.625rem;text-align:center;
font-size:0.8125rem;font-weight:600;color:var(--vibeui-drawer-002-muted);
}
[data-vibeui-block="drawer-002"] [data-part="list"]{
list-style:none;margin:0;padding:0;overflow-y:auto;
}
[data-vibeui-block="drawer-002"] [data-part="item"]+[data-part="item"]{
border-top:1px solid var(--vibeui-drawer-002-border);
}
/* Строка во всю ширину и высотой под палец: промахнуться почти невозможно. */
[data-vibeui-block="drawer-002"] [data-part="action"]{
appearance:none;border:0;cursor:pointer;width:100%;
display:flex;flex-direction:column;gap:0.125rem;
min-height:3.25rem;padding:0.6875rem 1rem;
background:transparent;color:inherit;font:inherit;text-align:left;
}
[data-vibeui-block="drawer-002"] [data-part="action"]:hover{background:oklch(0.97 0.003 265)}
[data-vibeui-block="drawer-002"] [data-part="action"]:focus-visible{outline:2px solid var(--vibeui-drawer-002-accent);outline-offset:-2px}
[data-vibeui-block="drawer-002"] [data-part="label"]{font-size:0.9375rem;font-weight:600}
[data-vibeui-block="drawer-002"] [data-part="hint"]{font-size:0.75rem;color:var(--vibeui-drawer-002-muted)}
[data-vibeui-block="drawer-002"] [data-part="action"][data-tone="danger"] [data-part="label"]{color:var(--vibeui-drawer-002-danger)}
/* Отмена отдельной картой: между ней и списком есть промах-зазор. */
[data-vibeui-block="drawer-002"] [data-part="cancel"]{
appearance:none;border:0;cursor:pointer;
height:3.25rem;border-radius:1rem;
background:var(--vibeui-drawer-002-bg);color:var(--vibeui-drawer-002-accent);
font:inherit;font-size:0.9375rem;font-weight:700;
box-shadow:0 -18px 50px -28px oklch(0.2 0.02 265 / 60%);
}
[data-vibeui-block="drawer-002"] [data-part="cancel"]:focus-visible{outline:2px solid var(--vibeui-drawer-002-accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
[data-vibeui-block="drawer-002"] *{animation:none!important;transition:none!important}
[data-vibeui-block="drawer-002"] dialog{translate:0 0}
}
`

const DEFAULT_ACTIONS: Drawer002Action[] = [
  { label: "Поделиться ссылкой", hint: "Скопируется в буфер обмена" },
  { label: "Дублировать проект" },
  { label: "Переименовать" },
  {
    label: "Удалить проект",
    hint: "Останется в корзине 30 дней",
    tone: "danger",
  },
]

/**
 * Нижний ящик действий на телефоне: ручка, крупные строки, отдельная отмена.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Drawer002({
  triggerLabel = "Действия",
  title = "Проект «Витрина»",
  actions = DEFAULT_ACTIONS,
  cancelLabel = "Отмена",
  accent,
  className,
  style,
  ...props
}: Drawer002Props) {
  const drawer = useRef<HTMLDialogElement>(null)

  const palette = {
    ...(accent ? { "--vibeui-drawer-002-accent": accent } : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-drawer-002" precedence="medium">
        {STYLES}
      </style>
      <div
        {...props}
        data-vibeui-block="drawer-002"
        className={className}
        style={palette}
      >
        <button
          type="button"
          data-part="trigger"
          onClick={() => drawer.current?.showModal()}
        >
          {triggerLabel}
        </button>
        <dialog
          ref={drawer}
          aria-label={title}
          onClick={(event) => {
            if (event.target === drawer.current) {
              drawer.current.close()
            }
          }}
        >
          <div data-part="panel">
            <div data-part="card">
              <span data-part="grabber" aria-hidden="true" />
              <p data-part="title">{title}</p>
              <ul data-part="list">
                {actions.map((action) => (
                  <li key={action.label} data-part="item">
                    <button
                      type="button"
                      data-part="action"
                      data-tone={action.tone ?? "neutral"}
                      onClick={() => drawer.current?.close()}
                    >
                      <span data-part="label">{action.label}</span>
                      {action.hint ? (
                        <span data-part="hint">{action.hint}</span>
                      ) : null}
                    </button>
                  </li>
                ))}
              </ul>
            </div>
            <button
              type="button"
              data-part="cancel"
              onClick={() => drawer.current?.close()}
            >
              {cancelLabel}
            </button>
          </div>
        </dialog>
      </div>
    </>
  )
}