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.

Dies ist kein offizielles daisyUI-Produkt, sondern eine von Martz.digital (alias Jonathan Martz) entwickelte Bibliothek.

Komponenten-Showcase

DaisyMask

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.

DaisyMask – Props-Referenz
BeschreibungErforderlichNameTyp
Zusätzliche CSS-Klassen am äußeren Element.
classNamestring
Form der Maske.
shape
"squircle" | "heart" | "hexagon" | "hexagon-2" | "decagon" | "pentagon" | "diamond" | "square" | "circle" | "star" | "star-2" | "triangle" | "triangle-2" | "triangle-3" | "triangle-4" | "parallelogram" | "parallelogram-2" | "parallelogram-3" | "parallelogram-4"
Darstellungsgröße der Komponente.
size
"sm" | "md" | "lg"
Live-Vorschau

Für dein Projekt

DaisyMask – Vollständiger Vue-Code

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

<template>
  <div class="flex flex-wrap gap-6">
    <DaisyMask shape="heart" size="lg" class-name="bg-primary" aria-label="Herz" />
    <DaisyMask shape="hexagon" size="lg" class-name="bg-secondary" aria-label="Sechseck" />
    <DaisyMask shape="star" size="lg" class-name="bg-accent" aria-label="Stern" />
  </div>
</template>