Modal

Superposition de dialogue pour l’interaction utilisateur et l’affichage d’informations.

Import

import { Modal } from 'asterui'

Exemples

Modal de base

Modal simple avec fonctionnalité d'ouverture/fermeture.

</>

Open Modal

Basic Modal

This is the modal content.

You can put any content here.

Close modal

import { Modal, Button } from 'asterui'
import { useState } from 'react'

function App() {
  const [open, setOpen] = useState(false);
  
  return (
      <Button color="primary" onClick={() => setOpen(true)}>
        Open Modal
      </Button>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title="Basic Modal"
      >
        <p>This is the modal content.</p>
        <p>You can put any content here.</p>
      </Modal>
    )
}

export default App

Pied de page par défaut

Modal avec boutons OK/Annuler intégrés en utilisant les props onOk et onCancel.

</>

Open Modal

Submit Form

Click OK to submit the form or Cancel to close.

CancelSubmit

Close modal

import { Modal, Button } from 'asterui'
import { useState } from 'react'

function App() {
  const [open, setOpen] = useState(false);
  
  return (
      <Button color="primary" onClick={() => setOpen(true)}>
        Open Modal
      </Button>
      <Modal
        open={open}
        onOk={() => {
          setOpen(false);
          Modal.success({ title: 'Submitted', content: 'Form submitted successfully!' });
        }}
        onCancel={() => setOpen(false)}
        title="Submit Form"
        okText="Submit"
        cancelText="Cancel"
      >
        <p>Click OK to submit the form or Cancel to close.</p>
      </Modal>
    )
}

export default App

Pied de page personnalisé

Modal avec boutons de pied de page personnalisés.

</>

Open Modal

Confirmation

Are you sure you want to proceed with this action?

CancelOK

Close modal

import { Modal, Button, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [open, setOpen] = useState(false);
  
  const handleOk = () => {
    setOpen(false);
    Modal.success({ title: 'Success', content: 'Action completed successfully!' });
  };
  
  return (
      <Button color="primary" onClick={() => setOpen(true)}>
        Open Modal
      </Button>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title="Confirmation"
        footer={
          <Space direction="horizontal" size="sm">
            <Button onClick={() => setOpen(false)}>Cancel</Button>
            <Button color="primary" onClick={handleOk}>
              OK
            </Button>
          </Space>
        }
      >
        <p>Are you sure you want to proceed with this action?</p>
      </Modal>
    )
}

export default App

Méthodes statiques

Dialogues rapides utilisant Modal.info, Modal.success, Modal.warning et Modal.error.

</>

InfoSuccessWarningError

import { Modal, Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="sm" wrap>
        <Button onClick={() => Modal.info({ title: 'Info', content: 'This is an informational message.' })}>
          Info
        </Button>
        <Button onClick={() => Modal.success({ title: 'Success', content: 'Operation completed successfully!' })}>
          Success
        </Button>
        <Button onClick={() => Modal.warning({ title: 'Warning', content: 'Please proceed with caution.' })}>
          Warning
        </Button>
        <Button onClick={() => Modal.error({ title: 'Error', content: 'Something went wrong.' })}>
          Error
        </Button>
      </Space>
    )
}

export default App

Dialogue de confirmation

Dialogue de confirmation avec boutons OK et Annuler utilisant Modal.confirm.

</>

Delete Item

import { Modal, Button } from 'asterui'

function App() {
  return (
      <Button
        onClick={() =>
          Modal.confirm({
            title: 'Delete Item',
            content: 'Are you sure you want to delete this item? This action cannot be undone.',
            okText: 'Delete',
            cancelText: 'Cancel',
            onOk: () => Modal.success({ title: 'Deleted', content: 'Item has been deleted.' }),
          })
        }
      >
        Delete Item
      </Button>
    )
}

export default App

Modal centré

Modal centré verticalement.

</>

Centered Modal

Centered Modal

This modal is vertically centered on the screen.

Close modal

import { Modal, Button } from 'asterui'
import { useState } from 'react'

function App() {
  const [open, setOpen] = useState(false);
  
  return (
      <Button color="primary" onClick={() => setOpen(true)}>
        Centered Modal
      </Button>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title="Centered Modal"
        centered
      >
        <p>This modal is vertically centered on the screen.</p>
      </Modal>
    )
}

export default App

Tailles de modal

Différentes largeurs de modal.

</>

Small (400px)Default (520px)Large (800px)

Modal Width: 520px

This modal has a width of 520px.

Close modal

import { Modal, Button, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [open, setOpen] = useState(false);
  const [width, setWidth] = useState<number | string>(520);
  
  const showModal = (w: number | string) => {
    setWidth(w);
    setOpen(true);
  };
  
  return (
      <Space direction="horizontal" size="sm" wrap>
        <Button onClick={() => showModal(400)}>
          Small (400px)
        </Button>
        <Button onClick={() => showModal(520)}>
          Default (520px)
        </Button>
        <Button onClick={() => showModal(800)}>
          Large (800px)
        </Button>
      </Space>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title={`Modal Width: ${width}px`}
        width={width}
      >
        <p>This modal has a width of {width}px.</p>
      </Modal>
    )
}

export default App

Position responsive

La position du modal peut changer en fonction de la taille de l'écran en utilisant un objet de position responsive.

</>

Responsive Modal

Responsive Modal

This modal appears at the bottom on mobile and centered on larger screens.

Resize your browser to see the effect.

Close modal

import { Modal, Button } from 'asterui'
import { useState } from 'react'

function App() {
  const [open, setOpen] = useState(false);
  
  return (
      <Button color="primary" onClick={() => setOpen(true)}>
        Responsive Modal
      </Button>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title="Responsive Modal"
        position={{ base: 'bottom', sm: 'middle' }}
      >
        <p>This modal appears at the bottom on mobile and centered on larger screens.</p>
        <p className="text-sm text-base-content/70 mt-2">Resize your browser to see the effect.</p>
      </Modal>
    )
}

export default App

API

Modal

Propriété	Description	Type	Défaut
open	État d’ouverture contrôlé	boolean	false
title	Titre du modal	React.ReactNode	-
children	Contenu du modal	React.ReactNode	-
footer	Contenu de pied de page personnalisé (définir à null pour masquer)	React.ReactNode	-
onOk	Gestionnaire de clic du bouton OK (affiche le pied de page par défaut)	() => void | Promise<void>	-
onCancel	Gestionnaire de clic du bouton Annuler	() => void	-
onClose	Gestionnaire de fermeture (alias pour onCancel)	() => void	-
okText	Texte du bouton OK	string	'OK'
cancelText	Texte du bouton Annuler	string	'Cancel'
width	Largeur du modal	number | string	-
centered	Centrer verticalement le modal	boolean	false
position	Position du modal (supporte l’objet responsive)	'top' | 'middle' | 'bottom' | { base?, sm?, md?, lg?, xl?, '2xl'? }	-
align	Alignement du modal	'start' | 'end'	-
maskClosable	Fermer en cliquant sur l’arrière-plan	boolean	true
closable	Afficher l’arrière-plan de fermeture	boolean	true
className	Classes CSS supplémentaires	string	-

Modal.info/success/warning/error/confirm

Propriété	Description	Type	Défaut
title	Titre du modal	React.ReactNode	-
content	Contenu du modal	React.ReactNode	-
onOk	Gestionnaire de clic du bouton OK	() => void | Promise<void>	-
onCancel	Gestionnaire de clic du bouton Annuler (confirm uniquement)	() => void	-
okText	Texte du bouton OK	string	'OK'
cancelText	Texte du bouton Annuler (confirm uniquement)	string	'Cancel'
type	Type de modal pour le style	'info' | 'success' | 'warning' | 'error'	-

Méthodes statiques

• Modal.info(config) - Dialogue d’information
• Modal.success(config) - Dialogue de succès
• Modal.warning(config) - Dialogue d’avertissement
• Modal.error(config) - Dialogue d’erreur
• Modal.confirm(config) - Dialogue de confirmation avec OK/Annuler

Accessibilité

• Utilise l’élément natif <dialog> pour un comportement modal approprié
• Le focus est piégé dans le modal lorsqu’il est ouvert
• Appuyer sur Échap ferme le modal
• Le focus est restauré sur l’élément déclencheur à la fermeture
• Utilise aria-labelledby et aria-describedby pour les lecteurs d’écran