Диалог

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

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

Контролируемый диалог

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

export default function Demo() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <LhButton type="primary" onClick={() => setOpen(true)}>
        Открыть диалог
      </LhButton>
      <LhDialog
        open={open}
        title="Подсказка"
        width="420px"
        footer={
          <>
            <LhButton onClick={() => setOpen(false)}>Отмена</LhButton>
            <LhButton type="primary" onClick={() => setOpen(false)}>ОК</LhButton>
          </>
        }
        onClose={() => setOpen(false)}
      >
        <p>Это контролируемый диалог.</p>
      </LhDialog>
    </>
  )
}

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

Проп	Описание	Тип	Допустимые значения	По умолчанию
open	Открыт ли (полностью контролируемый)	boolean	—	false
title	Заголовок (при отсутствии header используется как запасной aria-label)	string	—	—
width	Ширина	string | number	—	—
fullscreen	На весь экран	boolean	—	false
showClose	Показывать кнопку закрытия	boolean	—	true
closeOnClickModal	Закрывать по нажатию на маску	boolean	—	true
closeOnPressEscape	Закрывать по Esc	boolean	—	true
draggable	Перетаскиваемый (за строку заголовка)	boolean	—	false
center	Центрировать заголовок и нижнюю область	boolean	—	false
position	Пользовательское смещение позиционирования	{ top?: string; left?: string }	—	—
lockScroll	Блокировать прокрутку body при открытии	boolean	—	true
beforeClose	Перехват перед закрытием (возврат false / Promise<false> отменяет закрытие)	() => boolean | Promise<boolean>	—	—
top	Отступ сверху	string	—	—
zIndex	Уровень слоя (по умолчанию назначается возрастающим счётчиком useLhZIndex)	number	—	—
header	Пользовательская шапка (переопределяет title)	ReactNode	—	—
footer	Пользовательская нижняя область	ReactNode	—	—
themeVars	Переменные темы на уровне компонента	Record<string, string>	—	—
sx	Сокращение для макета	SxProps	—	—

События Dialog

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

ref

forwardRef<HTMLDivElement>. У LhDialogInstance пока нет императивных методов.

Полностью контролируемая семантика

В отличие от plus, Dialog в этой библиотеке не имеет внутреннего промежуточного состояния isVisible: open полностью принадлежит внешнему state, а любой путь закрытия лишь вызывает onClose. Подробнее см. в Руководстве по миграции.

Esc при нескольких слоях

useLhOverlayStack поддерживает стек слоёв в порядке открытия: Esc закрывает только верхний слой, чтобы одно нажатие не убрало все слои сразу.

Стили

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