Dialog

Es una ventana superpuesta sobre la ventana principal o sobre otra ventana de diálogo. Las ventanas debajo de un diálogo modal quedan inertes. Es decir, los usuarios no pueden interactuar con el contenido fuera de una ventana de diálogo activa. El contenido inerte fuera de un diálogo activo normalmente queda visualmente oscurecido o atenuado para que sea difícil de distinguir y, en algunas implementaciones, los intentos de interactuar con ese contenido inerte hacen que el diálogo se cierre.

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>

With Actions

Add a DialogActions region to render action buttons in the dialog footer. Use bind:this on the Dialog to call closeDialog() programmatically.

Propiedades de Dialog

Name	Type	Description
type	'modal' | 'non-modal' | 'alert'	El tipo de comportamiento del diálogo. Predeterminado: `modal`.
open	bindable boolean	Si el diálogo está abierto.
onOpenChange	(open: boolean) => void	Callback que se ejecuta cuando el diálogo se abre o se cierra.
children	Snippet	Los subcomponentes del diálogo que se renderizarán.

Propiedades de DialogTrigger

Name	Type	Description
ref	HTMLButtonElement	La referencia DOM del botón disparador.
children	Snippet	El contenido del botón disparador.
…ButtonProps	ButtonProps<'button'>	Hereda todas las propiedades de `Button`.

Propiedades de DialogSurface

Name	Type	Description
ref	bindable HTMLDialogElement	La referencia DOM del elemento del diálogo.
children	Snippet	El contenido que se renderizará dentro de la superficie del diálogo.
…Attributes	HTMLAttributes<HTMLDialogElement>	Todos los atributos nativos de `<dialog>` se reenvían.

Propiedades de DialogTitle

Name	Type	Description
as	'div' | 'h1'–'h6'	El elemento con el que se renderiza el título. Predeterminado: `h3`.
ref	bindable element	La referencia DOM del elemento del título.
children	Snippet	El contenido del título.
…Attributes	Polymorphic	Todos los atributos HTML del elemento elegido en `as` se reenvían.

Propiedades de DialogContent

Name	Type	Description
ref	HTMLDivElement	La referencia DOM del elemento de contenido.
children	Snippet	El contenido que se renderizará dentro del cuerpo del diálogo.
…Attributes	HTMLAttributes<HTMLDivElement>	Todos los atributos nativos de `<div>` se reenvían.

Propiedades de DialogActions

Name	Type	Description
ref	bindable HTMLDivElement	La referencia DOM del elemento de acciones.
position	'start' | 'center' | 'end'	Alineación horizontal de las acciones. Predeterminado: `end`.
fluid	boolean	Si el contenedor de acciones usa un diseño de ancho completo.
children	Snippet	Los elementos de acción que se renderizarán, normalmente botones.
…Attributes	HTMLAttributes<HTMLDivElement>	Todos los atributos nativos de `<div>` se reenvían.