Выдвижная панель

Выдвижная панель, появляющаяся с края экрана; часто применяется там, где нужно большое пространство для отображения — просмотр подробностей, заполнение форм и т. п. Отличия от Dialog: располагается у края, выезжает в заданном направлении, а размер панели действует на одну сторону (ширину или высоту).

Базовое использование

Четыре направления и пользовательский размер

import { useState } from 'react'
import { LhButton, LhDrawer } from '@lh-ui/react'

export default function Demo() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <LhButton onClick={() => setOpen(true)}>Открыть панель</LhButton>
      <LhDrawer title="Заголовок панели" open={open} onClose={() => setOpen(false)}>
        Содержимое панели
      </LhDrawer>
    </>
  )
}

Props компонента Drawer

Проп	Описание	Тип	Допустимые значения	По умолчанию
children	Основное содержимое	ReactNode	—	—
open	Отображается ли (контролируемый)	boolean	—	false
title	Заголовок	ReactNode	—	—
direction	Направление выезда	'right' | 'left' | 'top' | 'bottom'	—	'right'
size	Размер панели (число → px, строка может быть в процентах)	string | number	—	'30%'
showClose	Показывать ли кнопку закрытия	boolean	—	true
maskClosable	Закрывать ли по нажатию на маску	boolean	—	false
closeOnEsc	Закрывать ли по Esc	boolean	—	true
lockScroll	Блокировать ли прокрутку body (при блокировке также захватывается фокус)	boolean	—	true
beforeClose	Перехват перед закрытием; закрытие продолжается только после вызова done	(done: () => void) => void	—	—
zIndex	z-index (если не задан, используется глобальная система возрастающих значений)	number	—	—
header	Содержимое шапки (переопределяет стандартную строку заголовка)	ReactNode	—	—
footer	Содержимое нижней области (кнопки)	ReactNode	—	—
themeVars	Переменные темы на уровне компонента	Record<string, string>	—	—
sx	Сокращение для макета (применяется к панели)	SxProps	—	—

События Drawer

Событие	Описание	Сигнатура обратного вызова	Аналог во Vue
onClose	Запрос закрытия (маска / Esc / кнопка закрытия), срабатывает после перехвата beforeClose	() => void	update:modelValue / close
onOpen	При открытии (после монтирования DOM, до начала анимации появления)	() => void	open
onOpened	По завершении анимации открытия	() => void	opened
onCloseStart	Запрос закрытия принят, начинается анимация ухода	() => void	—
onClosed	После завершения анимации закрытия и размонтирования DOM	() => void	closed

ref

forwardRef<LhDrawerInstance>. LhDrawerInstance предоставляет close() (с перехватом beforeClose) и isOpen.

Маска по умолчанию не пропускает нажатия

maskClosable по умолчанию false (функция canDrawerClose в core по умолчанию отклоняет нажатия на маску), чтобы избежать случайных срабатываний; в plus closeOnClickModal по умолчанию true — при миграции нужно объявить это явно.

Захват фокуса

Фокус захватывается (функция shouldDrawerTrapFocus) только при включённом lockScroll: выдвижная панель часто работает как лёгкий слой, и без блокировки прокрутки сохраняется порядок табуляции формы позади неё. При закрытии фокус возвращается.

Направление размера

Если size — число, оно нормализуется в px; для направлений влево/вправо применяется к width панели, для вверх/вниз — к height.

Стили

import '@lh-ui/react/style/drawer'