Dialog | Dialog

`Dialog`#

Descripción#

Componente raíz del diálogo. No dibuja nada: controla el estado abierto/cerrado mediante v-model:open y provee el contexto que usan los subcomponentes.

Props#

open (boolean) — Indica si el diálogo está abierto. Por defecto: false.

Emite#

update:open — Se emite con false cuando el diálogo se cierra.

Uso#

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script setup lang="ts">
import { ref } from 'vue'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, ActionButton } from '@vasakgroup/vue-libvasak'

const open = ref(false)
</script>

<template>
  <ActionButton label="Abrir" @click="open = true" />

  <Dialog v-model:open="open">
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Confirmar acción</DialogTitle>
      </DialogHeader>
      <p>¿Estás seguro de que deseas continuar?</p>
      <DialogFooter>
        <ActionButton label="Cancelar" variant="secondary" @click="open = false" />
        <ActionButton label="Confirmar" @click="open = false" />
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>