Daisy Studio

Gut zu wissen:

Speichere den kopierten Code als .vue-Datei. Dein Projekt benötigt Vue 3, vue-daisyui-components und Tailwind CSS mit daisyUI. Binde vue-daisyui-components/styles.css global ein.

Komponenten-Showcase

DaisyCard

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.

DaisyCard – Props-Referenz
BeschreibungErforderlichNameTyp
Aktionsliste mit Beschriftung, Variante und optionalem onClick.
actions
Array<{ label: string; variant?: "primary" | "secondary" | "accent" | "neutral" | "ghost" | "link" | "info" | "success" | "warning" | "error"; onClick?: () => void }>
Schriftgröße der Aktionsbeschriftung.
actionSize
"xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl"
Beschriftung des Badges im Kartenkopf.
badgestring
Farbvariante des Karten-Badges.
badgeVariant
"primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "error"
Zeigt einen Rahmen um die Karte.
borderedboolean
Zusätzliche CSS-Klassen am äußeren Element.
classNamestring
Aktiviert die kompakte Kartenvariante.
compactboolean
Angezeigter Beschreibungstext.
descriptionstring
Schriftgröße der Beschreibung.
descriptionSize
"xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl"
URL des Kartenbilds.
imagestring
Alternativer Text für das Bild.
imageAltstring
Zeigt das Bild als Hintergrund der Karte.
imageFullboolean
Ordnet das Bild seitlich neben dem Karteninhalt an.
sideboolean
Angezeigter Titel.
titlestring
Schriftgröße des Titels.
titleSize
"xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl"
Live-Vorschau
Platzhalterbild für die Projektkarte

Dein nächstes Projekt

Neu

Eine DaisyCard mit Titel, Badge, eigenem Inhalt und einem Actions-Slot.

Dokumentation

Für dein Projekt

DaisyCard – Vollständiger Vue-Code

<script setup lang="ts">
import DaisyCard from 'vue-daisyui-components/components/DaisyCard.vue'
</script>

<template>
  <section class="mx-auto max-w-md">
    <DaisyCard
        title="Dein nächstes Projekt"
        image="https://placeholdit.com/600x400/dddddd/999999"
        image-alt="Platzhalterbild für die Projektkarte"
        badge="Neu"
        badge-variant="primary"
        bordered
    >
      <p>Eine DaisyCard mit Titel, Badge, eigenem Inhalt und einem Actions-Slot.</p>
      <template #actions>
        <a href="https://daisyui.com/components/card/" class="btn btn-primary">
          Dokumentation
        </a>
      </template>
    </DaisyCard>
  </section>
</template>