Sheet

Паттерны

Поверхность выбора в мобильном стиле

Когда использовать:

• Сценарию подходит поведение нижней шторки.

Заметки о композиции:

• Используйте точки привязки осознанно.
• Первое видимое состояние должно быть достаточно большим для основного действия или группы полей.

Компромиссы:

• Хорошая эргономика для касаний.
• Сложнее во взаимодействии, чем диалог.

import { useId, useState, type CSSProperties } from 'react';
import {
  Button,
  Heading,
  Icon,
  IconButton,
  Sheet,
  SheetClose,
  SheetContent,
  SheetHandle,
  SheetTrigger,
  Text,

Длинная прокручиваемая шторка

Когда использовать:

• Содержимое превышает комфортную высоту вьюпорта.

Заметки о композиции:

• Сделайте тело элементом с overflow: auto; как flex-элемент внутри SheetContent он сжимается сам.
• Держите шапку и элементы закрытия на месте, пока прокручивается тело.

Компромиссы:

• Сохраняет рамку шторки.
• Требует проверки на разных вьюпортах.

import { useId } from 'react';
import {
  Button,
  Heading,
  Sheet,
  SheetContent,
  SheetHandle,
  SheetTrigger,
  Text,
} from '@vega-ui/react';

const names = ['Blue Harbor Cafe', 'Little Fern', 'Kiln & Co', 'Northside Roasters', 'The Daily Grind', 'Saltwater Bakery'];

Блокирующий шаг в шторке

Когда использовать:

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

Заметки о композиции:

• Используйте closedBy='none' на SheetContent, только когда путь завершения очевиден; кнопка отправки в <form method="dialog"> всё равно закрывает шторку.
• Держите содержимое достаточно коротким, чтобы оно работало на каждой активной точке привязки.

Компромиссы:

• Сильное направление пользователя по задаче.
• Выше риск запереть пользователя в запутанном сценарии, если текст слабый.

import { useId, useState } from 'react';
import {
  Button,
  Heading,
  Sheet,
  SheetContent,
  SheetTrigger,
  Text,
} from '@vega-ui/react';

export default function BlockingStepSheet() {
  const titleId = useId();

Сравнение

Быстрое правило выбора

Выбирайте Sheet, когда взаимодействие должно ощущаться как удобное для касаний или как нижняя шторка, а не как боковая панель или модальное окно по центру.

Sheet и Dialog

Используйте Sheet, когда:

• подача должна ощущаться выезжающей и удобной для касаний
• содержимое должно появляться от края экрана, а не модальным окном по центру

Используйте Dialog, когда:

• уместнее модальное окно по центру

Sheet и Drawer

Используйте Sheet, когда:

• важны взаимодействие нижней шторки или точки привязки

Используйте Drawer, когда:

• панель должна восприниматься как прикреплённая сбоку

Выбирайте этот компонент, когда

• важны точки привязки
• задумано поведение панели как на мобильных устройствах
• метафоры жестов и появления снизу — часть UX

Не выбирайте этот компонент, когда

• задача — обычное модальное окно подтверждения
• лучше подходит семантика боковой панели

Решение проблем

Точки привязки ощущаются неправильно

Симптом

Промежуточные положения шторки неудобны или непригодны.

Вероятная причина

Точки привязки выбраны без проверки на реальной высоте содержимого.

Как проверить

• Проверьте каждую точку привязки с реалистичным содержимым.

Решение

• Подберите точки привязки под реальное содержимое и поведение вьюпорта.

Поведение жестов и клавиатуры расходится

Симптом

Касания работают приемлемо, но клавиатура или закрытие ощущаются сломанными.

Вероятная причина

Проверялся только один способ взаимодействия.

Как проверить

• Проверьте перетаскивание, как при касании.
• Проверьте открытие и закрытие с клавиатуры.

Решение

• Проверяйте все способы взаимодействия вместе.

Незакрываемая шторка ощущается ловушкой

Симптом

Пользователь не понимает, как завершить сценарий или выйти из него.

Вероятная причина

closedBy='none' на SheetContent используется без понятного пути завершения или ясного поясняющего текста.

Как проверить

• Пройдите сценарий без предварительного знания продукта.
• Проверьте, очевидно ли следующее действие с первого взгляда.

Решение

• Добавьте явные действия завершения и более понятный текст.
• Пересмотрите, действительно ли шторка должна быть незакрываемой.