Popconfirm 气泡确认框

通过点击操作触发的简单确认对话框。

导入

import { Popconfirm } from 'asterui'

示例

基础

带标题的简单气泡确认框。

import { Popconfirm, Button, notification } from 'asterui'

function App() {
  const handleDelete = () => {
    notification.success({
      message: 'Deleted',
      description: 'The item has been deleted successfully.',
    });
  };
  
  return (
      <Popconfirm title="Are you sure?" onConfirm={handleDelete}>
        <Button color="error">Delete</Button>
      </Popconfirm>
    )
}

export default App

带描述

添加描述以获得更多上下文。

import { Popconfirm, Button, notification } from 'asterui'

function App() {
  const handleDelete = () => {
    notification.success({
      message: 'Deleted',
      description: 'The item has been deleted successfully.',
    });
  };
  
  return (
      <Popconfirm
        title="Delete this task?"
        description="This action cannot be undone. Are you sure you want to continue?"
        onConfirm={handleDelete}
      >
        <Button color="error">Delete</Button>
      </Popconfirm>
    )
}

export default App

位置

气泡确认框可以放置在不同的位置。

import { Popconfirm, Button } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 flex-wrap">
        <Popconfirm title="Delete?" placement="top">
          <Button>Top</Button>
        </Popconfirm>
        <Popconfirm title="Delete?" placement="right">
          <Button>Right</Button>
        </Popconfirm>
        <Popconfirm title="Delete?" placement="bottom">
          <Button>Bottom</Button>
        </Popconfirm>
        <Popconfirm title="Delete?" placement="left">
          <Button>Left</Button>
        </Popconfirm>
      </div>
    )
}

export default App

自定义文本

自定义按钮文本和类型。

import { Popconfirm, Button, notification } from 'asterui'

function App() {
  return (
      <Popconfirm
        title="Confirm submission?"
        okText="Yes, submit"
        cancelText="No, cancel"
        okType="success"
        cancelType="error"
        onConfirm={() => {
          notification.success({ message: 'Submitted!', description: 'Form submitted successfully.' });
        }}
      >
        <Button color="primary">Submit</Button>
      </Popconfirm>
    )
}

export default App

异步确认

使用加载状态处理异步操作。

import { Popconfirm, Button, notification } from 'asterui'

function App() {
  const handleAsyncDelete = () => {
    return new Promise<void>((resolve) => {
      setTimeout(() => {
        notification.success({
          message: 'Deleted',
          description: 'The item has been deleted after async operation.',
        });
        resolve();
      }, 2000);
    });
  };
  
  return (
      <Popconfirm
        title="Delete this item?"
        description="This will take a moment..."
        onConfirm={handleAsyncDelete}
      >
        <Button color="error">Delete (Async)</Button>
      </Popconfirm>
    )
}

export default App

自定义图标

自定义或隐藏图标。

import { Popconfirm, Button } from 'asterui'

function App() {
  return (
      <div className="flex gap-4">
        <Popconfirm title="Delete this?" icon={<span className="text-2xl">🗑️</span>}>
          <Button>Custom Icon</Button>
        </Popconfirm>
        <Popconfirm title="Proceed?" icon={null}>
          <Button>No Icon</Button>
        </Popconfirm>
      </div>
    )
}

export default App

无取消按钮

隐藏取消按钮以进行仅确认的确认。

import { Popconfirm, Button } from 'asterui'

function App() {
  return (
      <Popconfirm
        title="Acknowledge this message"
        description="Click OK to dismiss."
        showCancel={false}
        okText="Got it"
      >
        <Button color="info">Show Info</Button>
      </Popconfirm>
    )
}

export default App

禁用

禁用的气泡确认框。

import { Popconfirm, Button } from 'asterui'

function App() {
  return (
      <Popconfirm title="Are you sure?" disabled>
        <Button disabled>Disabled</Button>
      </Popconfirm>
    )
}

export default App

API

`Popconfirm`

属性	描述	类型	默认值
`children`	触发元素	`React.ReactElement`	-
`title`	确认的标题	`React.ReactNode`	-
`description`	描述文本	`React.ReactNode`	-
`onConfirm`	确认时的回调(支持异步)	`() => void \| Promise<void>`	-
`onCancel`	取消时的回调	`() => void`	-
`okText`	确认按钮的文本	`string`	`'OK'`
`cancelText`	取消按钮的文本	`string`	`'Cancel'`
`okType`	确认按钮的按钮类型	`'primary' \| 'secondary' \| 'accent' \| 'success' \| 'warning' \| 'error' \| 'info'`	`'primary'`
`cancelType`	取消按钮的按钮类型	`'primary' \| 'secondary' \| 'accent' \| 'success' \| 'warning' \| 'error' \| 'info' \| 'ghost'`	`'ghost'`
`placement`	确认弹出窗口的位置	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`
`disabled`	气泡确认框是否禁用	`boolean`	`false`
`icon`	自定义图标(null 隐藏默认图标)	`React.ReactNode`	-
`showCancel`	显示取消按钮	`boolean`	`true`

可访问性

打开时焦点被困在气泡确认框内
Escape 键关闭气泡确认框
按钮可通过键盘访问
加载状态通过 aria-busy 进行通信