Komponenten-Showcase

DaisyDrawer

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.

DaisyDrawer – Props-Referenz
Beschreibung	Erforderlich	Name	Typ
		`id`	`string`
		`className`	`string`
		`open`	`boolean`
		`side`

Live-Vorschau

Seitenleiste öffnen

Für dein Projekt

DaisyDrawer – Vollständiger Vue-Code

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

const drawerId = useId()
</script>

<template>
  <DaisyDrawer :id="drawerId" class-name="[&>.drawer-side]:z-50">
    <template #content>
      <label :for="drawerId" class="btn btn-primary h-auto min-h-12 whitespace-normal py-3">Seitenleiste öffnen</label>
    </template>
    <template #sidebar>
      <nav class="min-h-full w-64 max-w-[85vw] bg-base-100 p-6">
        <h2 class="mb-4 text-xl font-bold">Navigation</h2>
        <a href="/showcase" class="link">Alle Komponenten</a>
        <label :for="drawerId" class="btn btn-ghost mt-6">Schließen</label>
      </nav>
    </template>
  </DaisyDrawer>
</template>