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

DaisyRadio

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.

DaisyRadio – Props-Referenz
BeschreibungErforderlichNameTyp
Name des Formularfelds oder der zugehörigen Gruppe.
namestring
Wert des Elements.
value
string | number
Zusätzliche CSS-Klassen am äußeren Element.
classNamestring
Deaktiviert die Interaktion.
disabledboolean
Aktueller Wert für die Bindung mit v-model.
modelValue
string | number
Live-Vorschau
Tarif auswählen

Für dein Projekt

DaisyRadio – Vollständiger Vue-Code

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

const plan = ref<string | number>('basic')
</script>

<template>
  <fieldset class="space-y-3">
    <legend class="mb-3 font-medium">Tarif auswählen</legend>
    <label class="flex items-center gap-3"><DaisyRadio v-model="plan" name="plan" value="basic" /> Basic</label>
    <label class="flex items-center gap-3"><DaisyRadio v-model="plan" name="plan" value="pro" /> Pro</label>
  </fieldset>
</template>