Komponenten-Showcase

DaisyModal

Ein einfaches Nutzungsbeispiel aus vue-daisyui-components – ohne zusätzliche Anwendungslogik.

Props-Referenz

Definitionen aus defineProps der installierten Komponente. Eine aktivierte Checkbox kennzeichnet ein erforderliches Prop. Typnamen verweisen auf die Typen der Bibliothek.

DaisyModal – Props-Referenz
Beschreibung	Erforderlich	Name	Typ
		`className`	`string`
		`closeSize`
		`open`	`boolean`

Live-Vorschau

Für dein Projekt

DaisyModal – Vollständiger Vue-Code

<script setup lang="ts">
import { ref, useId } from 'vue'
import DaisyButton from 'vue-daisyui-components/components/DaisyButton.vue'
import DaisyModal from 'vue-daisyui-components/components/DaisyModal.vue'

const open = ref(false)
const titleId = useId()
const descriptionId = useId()
</script>

<template>
  <section class="space-y-4">
    <DaisyButton variant="primary" @click="open = true">
      Modal öffnen
    </DaisyButton>
    <DaisyModal
        v-model:open="open"
        class-name="[&>.modal-box]:w-[calc(100%-2rem)] [&>.modal-box]:max-h-[calc(100dvh-2rem)]"
        :aria-labelledby="titleId"
        :aria-describedby="descriptionId"
    >
      <h2 :id="titleId" class="text-xl font-bold">Ein einfacher Dialog</h2>
      <p :id="descriptionId" class="py-4">
        DaisyModal wird über v-model:open gesteuert. Schließe den Dialog mit Escape,
        einem Klick auf den Hintergrund oder einem der Buttons.
      </p>
      <template #actions>
        <DaisyButton variant="primary" @click="open = false">Schließen</DaisyButton>
      </template>
    </DaisyModal>
  </section>
</template>