Dialog | DialogFooter

DialogFooter#

Descripción#

  • Pie del diálogo, donde van los botones de acción. En diálogos angostos los apila al revés para que la acción principal quede arriba.

Props#

  • No acepta props: es un contenedor estático.

Uso#

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<script setup lang="ts">
import { Dialog, DialogContent, DialogFooter, ActionButton } from '@vasakgroup/vue-libvasak'
</script>

<template>
  <Dialog v-model:open="open">
    <DialogContent>
      <!-- contenido -->
      <DialogFooter>
        <ActionButton label="Cancelar" variant="secondary" @click="open = false" />
        <ActionButton label="Guardar" @click="guardar" />
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>

Notas#

  • Se acomoda por el ancho del diálogo (contenedor @container), no por el de la pantalla.