Komponenten-Showcase

DaisyThemeController

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.

DaisyThemeController – Props-Referenz
Beschreibung	Erforderlich	Name	Typ
		`className`	`string`
		`disabled`	`boolean`
		`modelValue`
		`name`	`string`
		`type`
		`value`	`string`

Live-Vorschau

Dunkles Theme

Die Vorschau begrenzt das ausgewählte Theme auf diesen Bereich.

Für dein Projekt

DaisyThemeController – Vollständiger Vue-Code

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

const dark = ref<string | boolean>(false)
</script>

<template>
  <section :data-theme="dark ? 'dark' : 'light'" class="rounded-box bg-base-100 p-6 text-base-content">
    <label class="flex items-center gap-3">
      <DaisyThemeController v-model="dark" value="dark" name="theme" />
      Dunkles Theme
    </label>
    <p class="mt-3 text-sm">Die Vorschau begrenzt das ausgewählte Theme auf diesen Bereich.</p>
  </section>
</template>