Popconfirm

Un simple dialogue de confirmation déclenché par une action de clic.

Import

import { Popconfirm } from 'asterui'

Exemples

Base

Popconfirm simple avec titre.

</>

Delete

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

Avec description

Ajouter une description pour plus de contexte.

</>

Delete

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

Placements

Popconfirm peut être placé dans différentes positions.

</>

Top

Right

Bottom

Left

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

Texte personnalisé

Personnaliser le texte et les types de boutons.

</>

Submit

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

Confirmation asynchrone

Gérer les opérations asynchrones avec état de chargement.

</>

Delete (Async)

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

Icône personnalisée

Personnaliser ou masquer l'icône.

</>

Custom Icon

No Icon

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

Sans bouton d'annulation

Masquer le bouton d'annulation pour les confirmations d'accusé de réception uniquement.

</>

Show Info

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

Désactivé

Popconfirm désactivé.

</>

Disabled

import { Popconfirm, Button } from 'asterui'

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

export default App

API

Popconfirm

Propriété	Description	Type	Défaut
children	Élément déclencheur	React.ReactElement	-
title	Titre de la confirmation	React.ReactNode	-
description	Texte de description	React.ReactNode	-
onConfirm	Rappel lors de la confirmation (supporte async)	() => void | Promise<void>	-
onCancel	Rappel lors de l’annulation	() => void	-
okText	Texte pour le bouton de confirmation	string	'OK'
cancelText	Texte pour le bouton d’annulation	string	'Cancel'
okType	Type de bouton pour le bouton de confirmation	'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info'	'primary'
cancelType	Type de bouton pour le bouton d’annulation	'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info' | 'ghost'	'ghost'
placement	Placement de la popup de confirmation	'top' | 'bottom' | 'left' | 'right'	'top'
disabled	Si le popconfirm est désactivé	boolean	false
icon	Icône personnalisée (null pour masquer par défaut)	React.ReactNode	-
showCancel	Afficher le bouton d’annulation	boolean	true

Accessibilité

• Le focus est piégé dans le popconfirm lorsqu’il est ouvert
• La touche Échap ferme le popconfirm
• Les boutons sont accessibles au clavier
• L’état de chargement est communiqué via aria-busy