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>

Posición

Combina top, middle o bottom con start, center o end para posicionar el diálogo en la ventana. La posición predeterminada es middle-center. Start y end siguen la dirección del texto; todas las posiciones mantienen una separación de 1rem respecto a los bordes de la ventana.

Ver Código

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

<Dialog position="top-end">
  <DialogTrigger>top-end</DialogTrigger>
  <DialogSurface>
    <DialogTitle>Dialog Title</DialogTitle>
    <DialogContent>Dialog body content.</DialogContent>
  </DialogSurface>
</Dialog>

Animación de entrada y salida

Elige fade, zoom, slide o un bounce sutil para la entrada y la salida. Duration acepta un nombre del tema como normal, una variable CSS como --fs-fast-duration o milisegundos como número. Usa 0 para desactivar la animación. Se respetan las preferencias de movimiento reducido.

Ver Código

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

<Dialog animation="zoom" duration="normal">
  <DialogTrigger>zoom</DialogTrigger>
  <DialogSurface>
    <DialogTitle>Dialog Title</DialogTitle>
    <DialogContent>Dialog body content.</DialogContent>
  </DialogSurface>
</Dialog>

<!-- Theme token: duration="fast" or duration="--fs-fast-duration" -->
<!-- Custom milliseconds: duration={200} -->

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.

Ver Código

<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>Save</Button>
      <Button appearance="standard" onclick={() => dialog.closeDialog()}>Close</Button>
    </DialogActions>
  </DialogSurface>
</Dialog>

No modal

Un diálogo no modal mantiene interactiva la página que queda detrás y muestra un botón de cierre en su esquina.

Ver Código

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

<Dialog type="non-modal">
  <DialogTrigger>Non-modal Dialog</DialogTrigger>
  <DialogSurface>
    <DialogTitle>Dialog Title</DialogTitle>
    <DialogContent>
      <p>The page behind this dialog stays interactive.</p>
    </DialogContent>
  </DialogSurface>
</Dialog>

Alerta

Una alerta es un modal que no se puede descartar con Escape ni haciendo clic fuera de él, así que el usuario debe elegir una de sus acciones.

Ver Código

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

<Dialog type="alert" bind:this={dialog}>
  <DialogTrigger>Alert Dialog</DialogTrigger>
  <DialogSurface>
    <DialogTitle>Discard changes?</DialogTitle>
    <DialogContent>
      <p>Your changes will be lost.</p>
    </DialogContent>
    <DialogActions>
      <Button appearance="standard" onclick={() => dialog.closeDialog()}>Cancel</Button>
      <Button onclick={() => dialog.closeDialog()}>Discard</Button>
    </DialogActions>
  </DialogSurface>
</Dialog>

Controlado

Enlaza open para leer y controlar un diálogo no modal desde tu propio estado.

Ver Código

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

<Button onclick={() => (open = true)}>Open dialog</Button>
<p>open: {open}</p>

<Dialog type="non-modal" bind:open>
  <DialogSurface>
    <DialogTitle>Controlled Dialog</DialogTitle>
    <DialogContent>
      <p>This dialog follows the bound open state.</p>
    </DialogContent>
  </DialogSurface>
</Dialog>

open: false

Al cambiar el estado

Pasa onOpenChange para saber cuándo se abre o se cierra el diálogo: desde el trigger, un botón que llame a closeDialog(), Escape o un clic fuera.

Ver Código

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

<Dialog bind:this={dialog} onOpenChange={(open) => (changes = [...changes, `onOpenChange(${open})`].slice(-5))}>
  <DialogTrigger>Events Dialog</DialogTrigger>
  <DialogSurface>
    <DialogTitle>Dialog Title</DialogTitle>
    <DialogContent>
      <p>Close it with Escape, by clicking outside or with the button.</p>
    </DialogContent>
    <DialogActions>
      <Button onclick={() => dialog.closeDialog()}>Close</Button>
    </DialogActions>
  </DialogSurface>
</Dialog>

<p>{changes.length ? changes.join(', ') : 'No changes yet'}</p>

No changes yet

Propiedades de Dialog

Name	Type	Default	Description
`type`	`'modal'` \| `'non-modal'` \| `'alert'`	`'modal'`	Cómo se comporta el dialog una vez abierto.
`position`	`DialogPosition`	`'middle-center'`	Dónde se sitúa el diálogo en la ventana. Start y end siguen la dirección del texto.
`animation`	`'fade'` \| `'zoom'` \| `'slide'` \| `'bounce'`	`'zoom'`	La animación de entrada y salida. Bounce usa un pequeño sobreimpulso.
`duration`	`DialogDuration`	`'normal'`	Duración en milisegundos, un nombre de duración del tema o una variable CSS. Usa 0 para desactivar el movimiento.
`open` bindable	`boolean` \| `null`		Controla el estado de apertura del dialog.
`onOpenChange`	`(open: boolean) => void`		Se llama cada vez que el dialog se abre o se cierra.
`children`	`Snippet`		Las partes del dialog: un trigger y una surface.

Propiedades de DialogTrigger

Name	Type	Default	Description
`ref` bindable	`HTMLButtonElement` \| `null`		La referencia del DOM del elemento trigger.
`ButtonProps<'button'>`

Propiedades de DialogSurface

Name	Type	Default	Description
`ref` bindable	`HTMLDialogElement` \| `null`		La referencia DOM del elemento del diálogo.
Element Attributes (`dialog`)

Propiedades de DialogTitle

Name	Type	Default	Description
`ref` bindable	`HTMLDivElement` \| `HTMLHeadingElement`		La referencia DOM del elemento del título.
`as`	`DialogTitleTag`	`'h3'`	El elemento HTML con el que se renderiza el título.
HTML Attributes

Propiedades de DialogContent

Name	Type	Default	Description
`ref` bindable	`HTMLDivElement` \| `null`		La referencia DOM del elemento de contenido.
Element Attributes (`div`)

Propiedades de DialogActions

Name	Type	Default	Description
`ref` bindable	`HTMLDivElement` \| `null`		La referencia DOM del elemento de acciones.
`fluid`	`boolean`		Estira todas las acciones para que se repartan el ancho disponible por igual.
`position`	`'start'` \| `'center'` \| `'end'`	`'end'`	Dónde se sitúan las acciones a lo largo del eje principal.
Element Attributes (`div`)

Componentes

Dialog

Dialog Title

Uso

Posición

top-start

top-center

top-end

middle-start

middle-center

middle-end

bottom-start

bottom-center

bottom-end

Animación de entrada y salida

fade

zoom

slide

bounce

Con acciones

Dialog Title

No modal

Dialog Title

Alerta

Discard changes?

Controlado

Controlled Dialog

Al cambiar el estado

Dialog Title

Propiedades de Dialog

Propiedades de DialogTrigger

Propiedades de DialogSurface

Propiedades de DialogTitle

Propiedades de DialogContent

Propiedades de DialogActions