メインコンテンツへスキップ

Dialog ダイアログ

現在のページの状態を保持したまま、ユーザーに通知し関連操作を担います。

基本的な使い方​

制御されたダイアログ
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)}>OK</LhButton>
          </>
        }
        onClose={() => setOpen(false)}
      >
        <p>これは制御されたダイアログです。</p>
      </LhDialog>
    </>
  )
}

Dialog Props​

プロパティ説明型使用可能な値デフォルト値
open開いているかどうか（純粋な制御）boolean—false
titleタイトル（header がない場合は aria-label のフォールバックにもなる）string——
width幅string | number——
fullscreen全画面boolean—false
showClose閉じるボタンを表示boolean—true
closeOnClickModalマスククリックで閉じるboolean—true
closeOnPressEscapeEsc キーで閉じる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 による割り込み後は呼ばれない）() => voidupdate: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'