Sheet

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

Storybook Исходники Figma

Обзор

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

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

Переменная	Значение	Влияет на
Основная поверхность шторки.`SheetContent`		В этом состоянии изменений не видно
Цвет поверхности шторки; по умолчанию `--surface-primary`.`SheetContent`		В этом состоянии изменений не видно
Необязательная тень приподнятой поверхности.`SheetContent`		В этом состоянии изменений не видно
Цвет ручки.`SheetHandle`		В этом состоянии изменений не видно
Затемнение подложки.`SheetContent::backdrop`		В этом состоянии изменений не видно
Зазор по бокам и снизу, пока шторка находится ниже верха вьюпорта; `0` оставляет шторку во всю ширину.`SheetContent`		В этом состоянии изменений не видно

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

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

SheetContent использует токены поверхностей темы и внутренние правила размеров. Это flex-колонка с горизонтальными отступами clamp(var(--spacing-12), 3vw, var(--spacing-16)) и нижним отступом var(--spacing-12) плюс отступ безопасной зоны, поэтому содержимому не нужна обёртка; прокручиваемая область — элемент с overflow: auto.
SheetHandle опирается на семантику стилей разделителя.
Задайте прокручиваемой области внутри шторки overscroll-behavior: contain, чтобы её прокрутка не передавалась странице позади.
Поверхность шторки — отдельный слой позади её содержимого. Задавайте её цвет через --sheet-background на SheetContent, а не через background. ::after у SheetContent — часть этой поверхности, поэтому для ваших стилей он недоступен.
Задавайте --sheet-inset и --sheet-background на самом SheetContent: значение от предка до них не доходит.
Подложка — это ::backdrop у SheetContent. Она использует --overlay, размытие при blurred, равном true, и не имеет фона при overlay, равном false. Стилизуйте её через класс SheetContent (.my-sheet::backdrop).
Как шторка в iOS, SheetContent парит карточкой со скруглёнными углами на расстоянии --sheet-inset (по умолчанию var(--spacing-8)) от боков и низа, пока находится ниже верха вьюпорта, и расширяется до краёв, поднимаясь к верху. Содержимое всё это время сохраняет ширину, поэтому не перестраивается между точками привязки: SheetContent добавляет --sheet-inset к своим боковым отступам. На нижней точке привязки часть ниже зазора обрезается, поэтому карточка растёт от нижнего края по мере подъёма. Задайте --sheet-inset: 0, чтобы оставить её во всю ширину. Пока карточка обрезана, shadowed не показывает тень. Шторка высотой во весь вьюпорт всегда во всю ширину.
SheetContent выставляет на себе --sheet-expansion, и эта переменная не наследуется: 0 в самом нижнем положении и 1, когда верх шторки достигает верха вьюпорта, следуя за перетаскиванием. Используйте её для собственных стилей, которые меняются по мере подъёма шторки, а data-dragging читайте, чтобы пропускать переходы, пока палец движется. Чтобы прочитать её в дочернем элементе или ::before, скопируйте её в свою переменную на SheetContent; эта переменная наследуется, поэтому всё внутри пересчитывает стили при каждом движении перетаскивания.

.full-width-sheet {
  --sheet-inset: 0;
}

.sheet-with-top-line {
  --top-line-opacity: var(--sheet-expansion);
}

.sheet-with-top-line::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--separator-opaque);
  opacity: var(--top-line-opacity);
}

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

Точки привязки и возможность закрытия — контракты взаимодействия.
overlay={false} и blurred на SheetContent меняют подачу подложки, а не модальное поведение.
Стили должны оставлять ручку достаточно заметной, чтобы шторка читалась как перетаскиваемая там, где это поведение есть.

Примеры

.brand-theme {
  --surface-primary: oklch(99.2% 0.006 80);
  --separator-opaque: oklch(45% 0.02 75 / 0.35);
}

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

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

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

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