Popconfirm 確認ポップオーバー

要素をクリックすると確認のバブルがポップアップし、危険を伴う操作や重要な操作の前に再確認を行います。セマンティクスは role="alertdialog" で、開くと即座にフォーカスをトラップし、確認 / キャンセルまたは Esc で閉じます。

基本的な使い方

確認 / キャンセル / セマンティクスタイプ

0 回確認済み

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

export default function Demo() {
  return (
    <LhPopconfirm title="この操作を実行しますか？" onConfirm={() => console.log('confirmed')}>
      <LhButton>確認</LhButton>
    </LhPopconfirm>
  )
}

Popconfirm Props

プロパティ	説明	型	使用可能な値	デフォルト値
children	トリガーノード	`ReactNode`	—	—
title	確認のタイトル / 質問	`ReactNode`	—	—
confirmText	確認ボタンのテキスト	`string`	—	言語パック `popconfirm.confirm`（确定）
cancelText	キャンセルボタンのテキスト	`string`	—	言語パック `popconfirm.cancel`（取消）
type	セマンティクスタイプ	`'info' \| 'warning' \| 'danger'`	—	`'warning'`
placement	表示位置	`LhPopconfirmPlacement`	`top` / `bottom` / `left` / `right`（`-start` / `-end` を含む）	`'top'`
trigger	トリガー方式	`LhPopconfirmTrigger`	`'hover' \| 'click' \| 'focus' \| 'manual'`	`'click'`
disabled	無効	`boolean`	—	`false`
showIcon	アイコンを表示するかどうか	`boolean`	—	`true`
hideCancel	キャンセルボタンを非表示にするかどうか	`boolean`	—	`false`
visible	制御された表示状態	`boolean`	—	—
defaultVisible	非制御のデフォルト表示	`boolean`	—	`false`
popperClass	ポップアップのカスタムクラス名	`string`	—	—
themeVars	コンポーネントレベルのテーマ変数	`Record<string, string>`	—	—
sx	クイックレイアウトプロパティ（トリガーに作用）	`SxProps`	—	—

Popconfirm イベント

イベント	説明	コールバックシグネチャ	Vue 対応
onConfirm	確認ボタンのクリック	`() => void`	`confirm`
onCancel	キャンセルボタンのクリックまたは Esc キー	`() => void`	`cancel`
onVisibleChange	表示状態の変化	`(visible: boolean) => void`	`update:visible`

フォーカストラップと Esc

ポップアップレイヤーは常に alertdialog としてフォーカスをトラップします。Esc キーはキャンセルボタンのクリックと同等です（onCancel を発火して閉じる）。

確認後に自動的に閉じる

plus と同様：確認またはキャンセルのクリックは、コールバックを発火してから閉じます。外部で手動で閉じる必要はありません。

スタイル

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

基本的な使い方​

Popconfirm Props​

Popconfirm イベント​

スタイル​

基本的な使い方

Popconfirm Props

Popconfirm イベント

スタイル