BottomSheet
Использование
BottomSheet отображает шторку, закрепленную у нижней границы экрана. Открытие/закрытие шторки регулируется свойством opened.
Контент передается через children. Заголовок, футер и область над заголовком можно заполнить через слоты contentHeader, contentFooter и contentBeforeHeader.
Примеры
Дополнительный контент перед заголовком
Слот contentBeforeHeader расположен над заголовком. Его можно использовать для иллюстрации, статуса или краткого контекста.
Ручка и кнопка закрытия
По умолчанию шторка отображает ручку и кнопку закрытия. Ручку можно перенести наружу с помощью handlePlacement="outer" или скрыть через hasHandle={false}. Кнопка закрытия отключается свойством hasClose={false}.
Подложка
Свойство withOverlay управляет отображением подложки. Если передать false, можно будет взаимодействовать с контентом под шторкой. Размытие подложки отключается через withBlur={false}.
Максимальная высота
Максимальная высота панели задается свойством maxHeight. По умолчанию используется 66dvh.
Точки остановки (snap-points)
С помощью свойства snapPoints можно задать несколько высот, на которых шторка останавливается при свайпе.
Значения — CSS-размеры ('320px', '50%', '40dvh').
По умолчанию функционал выключен. Без snapPoints поведение шторки не меняется.
Начальную точку можно задать через initialSnapPoint (по умолчанию — первая из snapPoints).
Смену активной точки можно отслеживать через onSnapPointChange.