Dialog

Un diálogo es una ventana superpuesta sobre la ventana principal o sobre otra ventana de diálogo.

Dialog está compuesto por varios componentes que trabajan juntos a través de un contexto compartido:

• Dialog: El componente raíz que crea el estado y proporciona contexto a sus hijos.
• DialogTrigger: Un botón que abre el diálogo al hacer clic.
• DialogSurface: El elemento `<dialog>` que aloja el contenido del diálogo.
• DialogTitle: El encabezado del diálogo. Se renderiza como un `h3` de forma predeterminada.
• DialogContent: El cuerpo desplazable del diálogo.
• DialogActions: El pie que contiene los botones de acción.

Uso

<script>
	import {
		Dialog,
		DialogTrigger,
		DialogSurface,
		DialogTitle,
		DialogContent,
		DialogActions,
		Button
	} from 'fluentui-svelte';

	let dialog = $state();
</script>

<Dialog bind:this={dialog}>
	<DialogTrigger>Open Dialog</DialogTrigger>
	<DialogSurface>
		<DialogTitle>Dialog Title</DialogTitle>
		<DialogContent>
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
		</DialogContent>
		<DialogActions fluid>
			<Button>Save</Button>
			<Button appearance="standard" onclick={() => dialog.closeDialog()}>Close</Button>
		</DialogActions>
	</DialogSurface>
</Dialog>

Con acciones

Añade una región DialogActions para mostrar botones de acción en el pie del diálogo. Usa bind:this en el Dialog para llamar a closeDialog() de forma programática.

<script>
  import { Dialog, DialogTrigger, DialogSurface, DialogTitle, DialogContent, DialogActions, Button } from 'fluentui-svelte';
  let dialog = $state();
</script>

<Dialog bind:this={dialog}>
  <DialogTrigger>Actions Dialog</DialogTrigger>
  <DialogSurface>
    <DialogTitle>Dialog Title</DialogTitle>
    <DialogContent>
      <p>Dialog body content.</p>
    </DialogContent>
    <DialogActions fluid>
      <Button style="flex: 1 1 auto;">Save</Button>
      <Button style="flex: 1 1 auto;" appearance="standard" onclick={() => dialog.closeDialog()}>Close</Button>
    </DialogActions>
  </DialogSurface>
</Dialog>

Propiedades de Dialog

Propiedades de DialogTrigger

Propiedades de DialogSurface

Propiedades de DialogTitle

Propiedades de DialogContent

Propiedades de DialogActions