Drawer

Drawer — составной компонент для выдвижных панелей (Drawer), прикреплённых к краю экрана: они сохраняют больше контекста страницы, чем модальное окно по центру.

Storybook Исходники

Обзор

Стили Drawer в основном определяются той же семантической моделью поверхностей, что и у других оверлеев. Большую часть настройки стоит делать на уровне темы, а не перестраивать раскладку панели с нуля.

Публичные CSS-переменные

Переменная	Значение	Влияет на
Основная поверхность панели.`DrawerContent`		В этом состоянии изменений не видно
Тень приподнятой панели.`DrawerContent`		В этом состоянии изменений не видно
Затемнение подложки.`DrawerContent::backdrop`		В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные частей

DrawerContent опирается на токены поверхностей темы и локальные правила размеров и раскладки.
Подложка — это ::backdrop у DrawerContent. Она использует --overlay, размытие при blurred, равном true, и не имеет фона при overlay, равном false. Стилизуйте её через класс DrawerContent (.my-drawer::backdrop).
Заголовки и кнопки закрытия внутри DrawerContent обычно должны наследовать поверхность панели, а не вводить отдельные цвета.

Взаимодействие состояний и вариантов

overlay={false} и blurred={false} на DrawerContent меняют внешний вид подложки, но не модальное поведение.
Длинное содержимое требует решений по раскладке больше, чем переопределений темы.
Если панель ведёт себя как плавающий инспектор, сохраняйте контраст и тень достаточно выраженными, чтобы отделить её от содержимого страницы.

Примеры

.brand-theme {
  --surface-primary: oklch(99.2% 0.006 80);
  --surface-shadow: 0 24px 64px oklch(20% 0.02 60 / 0.18);
}

Шапка в стиле Apple

Шапка с небольшим заголовком и круглой кнопкой закрытия 24px в углу — обычная композиция: Heading с size={4} и fontWeight={600} и DrawerClose asChild вокруг IconButton, абсолютно позиционированного в верхнем конечном углу (position: absolute, insetBlockStart: 16, insetInlineEnd: 16); его содержащим блоком служит открытый модальный <dialog>. У IconButton нет для этого опции размера или формы; круглая кнопка 24px получается из двух CSS-переменных, заданных на ней, — --icon-button-size: 24px и --icon-button-br-ratio: 0.5, — с Icon size='xs' внутри.

Не переопределяйте

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