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

DaisyStatIcon

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.

DaisyStatIcon – Props-Referenz
BeschreibungErforderlichNameTyp
Font-Awesome-Icondefinition für die Statistik.
icon
{ prefix, iconName, icon: [width, height, ligatures, unicode, svgPathData] }
Zusätzliche CSS-Klassen am äußeren Element.
classNamestring
Farbvariante des Statistik-Icons.
color
"primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "error" | "base-content"
Darstellungsgröße der Komponente.
size
"1x" | "2x" | "3x" | "4x" | "5x" | "6x" | "7x" | "8x" | "9x"
Live-Vorschau
Besuche
1.200

Für dein Projekt

DaisyStatIcon – Vollständiger Vue-Code

<script setup lang="ts">
import { faChartLine } from '@fortawesome/free-solid-svg-icons'
import DaisyStat from 'vue-daisyui-components/components/DaisyStat.vue'
import DaisyStatIcon from 'vue-daisyui-components/components/DaisyStatIcon.vue'
</script>

<template>
  <DaisyStat title="Besuche" value="1.200" shadow>
    <template #figure>
      <DaisyStatIcon :icon="faChartLine" color="primary" size="2x" />
    </template>
  </DaisyStat>
</template>