Dialog

Panoramica

Il componente Dialog è una modale basata sul componente Dialog di Material UI.

import { Dialog } from "@itlogix/itlogix-ui";

Proprietà (Props)

Nome	Tipo	Obbligatorio	Default	Descrizione
children	ReactNode	sì	-	Contenuto da visualizzare all'interno della modale.
isOpen	boolean	sì	-	Controlla se la modale è aperta o chiusa.
title	string	no	-	Titolo (opzionale) da visualizzare nell'intestazione.
maxWidth	Breakpoint	no	-	Imposta la larghezza massima della modale (xs, sm, md, lg, xl).
fullWidth	boolean	no	false	Se true, la modale occupa l'intera larghezza disponibile.
fullScreen	boolean	no	false	Se true, la modale occupa l'intero schermo.
onClose	() => void	no	-	Funzione chiamata quando l'utente chiude la modale.

Comportamento

• Se viene passato un title, la modale include un'intestazione con titolo e pulsante per la chiusura.
• Il pulsante di chiusura usa l'icona faClose di FontAwesome e il componente Button.
• Il contenuto viene renderizzato dentro il componente DialogContent di MUI

Esempi di utilizzo

Modale semplice

<Dialog isOpen={open} onClose={() => setOpen(false)}>
  <p>Contenuto della modale</p>
</Dialog>

Modale con titolo e larghezza definita

<Dialog
  isOpen={open}
  title="Dettagli utente"
  maxWidth="sm"
  fullWidth
  onClose={() => setOpen(false)}
>
  <UserDetails user={selectedUser} />
</Dialog>