Ein mit CSS erstelltes Einladungsstudio, das die semantischen Themes von daisyUI 5, passende Inhaltsfarben, verbundene Optionsfelder, Bereichsregler, Browser-Validierung und einen echten Dialog zur Prüfung demonstriert.
Offizielle daisyUI-5.7.47-Klassen, kompiliert mit Tailwind CSS 4.3.3; das Verhalten der Anwendung ist in einfachem JavaScript umgesetzt. · Implementierungsreferenz
02
daisyUI Design-System: Gestaltungsreferenz
daisyUI 5.7.47, erstellt mit Tailwind CSS 4.3.3. Die aufgeführten Farb- und Geometriewerte gehören zum gebündelten Theme Emerald; Lo-fi und Night definieren bewusst andere Werte. Typografie und Abstände der Seite sind eigene Gestaltungsentscheidungen mit Tailwind-kompatiblen Maßeinheiten.
daisyUI Designsystem: semantische Komponentenklassen in Tailwind CSS
Semantische Komponentenklassen für Tailwind CSS
daisyUI stellt Komponentenklassen über ein Tailwind-Plugin bereit. In Version fünf befindet sich die Einrichtung in CSS: Importiere tailwindcss und deklariere anschließend das daisyui-Plugin sowie die aktivierten Themes. Das Beispiel verwendet btn, card, fieldset, range, checkbox, join und modal, statt deren Erscheinungsbild mit maßgeschneiderten Selektoren nachzubilden.
Das Plugin stellt keine Zustandsverwaltung für die Anwendung bereit. Die nativen Eingabefelder, die Browser-Validierung, die Dialogmethoden und das kleine Modul JavaScript machen dieses Einladungsstudio interaktiv. Dieser Unterschied ist bei der Auswahl der Bibliothek wichtig: Sie kann mit verschiedenen Frameworks eingesetzt werden, weil ihre Komponentenebene CSS ist. Ein Klassenname allein führt jedoch keine Serveroperation aus.
daisyUI Designsystem: Jede farbige Oberfläche ihrer Inhaltsrolle zuordnen
Jede farbige Oberfläche ihrer Inhaltsrolle zuordnen
Die Einladungskarte verwendet bg-primary zusammen mit text-primary-content. Der Rollenstreifen wiederholt diese Zuordnung für secondary, accent und neutral. Dabei handelt es sich um aufeinander abgestimmte semantische Rollen, nicht um eine einzige feste Palette, die in jede Komponente übernommen werden muss. Bei Auswahl eines anderen aktivierten Themes ändern sich die zugrunde liegenden Variablen, nicht aber das Markup der Karte.
Bei Emerald ist primary ein helles Grün und primary-content ein dunkles Grün. Auf jedem primary-Hintergrund automatisch weißen Text zu verwenden, würde die vorgesehene Inhaltsrolle des Themes missachten. Die Spezifikationstabelle enthält die tatsächlichen OKLCH-Werte des installierten Emerald-Themes; sie wandelt diese nicht in vermeintliche hexadezimale Markenfarben um.
daisyUI Designsystem: Themes kompilieren, die angeboten werden sollen
Kompiliere die Themes, die du anbieten möchtest
Die CSS-Plugin-Konfiguration aktiviert Emerald als Standard sowie Lo-fi und Night. Ein Auswahlfeld ändert data-theme am Dokumentelement. Im Menü werden nur diese kompilierten Themes angeboten. Die Auswahl eines Namens, der nie erstellt wurde, würde das entsprechende CSS nicht hervorzaubern.
Themes umfassen auch Variablen für Rundungen, Feldgrößen, Rahmen und Effekte. Der Wechsel von Emerald zu Lo-fi verändert daher mehr als nur ein Farbfeld. Um ein Theme auf einen eingebetteten Bereich zu beschränken, kann data-theme diesem Bereich statt html zugewiesen werden. Dieses eigenständige Beispiel wendet es bewusst auf das gesamte Dokument an.
Kompiliere die vorgesehenen Themes im daisyUI-Plugin-Block.
Verwende im Komponenten-Markup semantische Klassen für Hintergrund und Inhalt.
Ändere data-theme und überprüfe Steuerelemente, Oberflächen und Text gemeinsam.
daisyUI Designsystem: Rundungen von Selektor, Feld und Box sind getrennt
Selektor-, Feld- und Box-Rundungen sind getrennt
Emerald definiert radius-selector mit einem Rem, radius-field mit einem halben Rem und radius-box mit einem Rem. Die Werte size-selector und size-field sind Basiseinheiten von einem Viertel Rem, die für Komponentenberechnungen verwendet werden. Sie sind nicht mit dem Abstand zwischen Seitenabschnitten austauschbar. Die Spezifikation trennt die Geometrie der Komponenten vom ursprünglichen Layout der Arbeitsfläche.
Die umgebende Seite verwendet einen systemeigenen Sans-Serif-Schriftstapel, eine große redaktionelle Überschrift und eine zweispaltige Komposition. daisyUI schreibt diese Überschriftenhierarchie nicht vor. Am ursprünglichen Umbruchpunkt von 700px wird die Seite so umgestellt, dass der Editor oberhalb der Einladung erscheint. Dabei bleiben alle Eingabefelder und Aktionen erhalten, statt Einstellungen auszublenden, um in einen Screenshot zu passen.
daisyUI Designsystem: Eine Gruppe von Radio-Buttons mit echten Eingabefeldern erstellen
Eine Gruppe fasst echte Radio-Eingaben zusammen
Die Formatoptionen sind Radio-Eingabefelder mit einem gemeinsamen name-Attribut sowie den Klassen join-item und btn. Die Auswahl von „Studioveranstaltung“ oder „Online-Gruppe“ ändert den nativen Auswahlzustand und den Vorschautext. Eine Reihe gestalteter Schaltflächen ohne dauerhaft gespeicherten Auswahlzustand würde diese gegenseitig ausschließende Wahl weniger eindeutig darstellen.
Für die Sitzplätze wird ein natives range-Eingabefeld mit Werten von vier bis vierundzwanzig in Zweierschritten verwendet. Ein output-Element zeigt die aktuelle Zahl an, während Beschriftungen an den Endpunkten die vorgesehene Gruppengröße erläutern. Die Materialoption ist ein echtes Kontrollkästchen. Sein Zustand ändert die Fußzeile der Einladung, statt lediglich die Farbe des Kästchens umzuschalten.
daisyUI Designsystem: Die Validierung von CSS berücksichtigt Browser-Einschränkungen
CSS Designsystem: Die Validierung berücksichtigt Browser-Einschränkungen
Das Titelfeld ist ein Pflichtfeld und hat Vorgaben für minimale und maximale Länge. Die Klasse validator und validator-hint stellen den ungültigen Zustand dar; für die Durchsetzung der nativen Einschränkung ist weiterhin der Browser zuständig. Das Formular umgeht die Gültigkeitsprüfung nicht mit einem allgemeinen Klick-Handler auf der Prüfschaltfläche.
Nachdem die normale Validierung erfolgreich war, entfernt der Submit-Handler überflüssige Leerzeichen am Anfang und Ende des Titels und prüft dessen sinnvolle Länge. So wird eine Zeichenfolge aus Leerzeichen erkannt, die eine ungefilterte minlength-Prüfung bestehen könnte. Eine benutzerdefinierte Validitätsmeldung wird beim nächsten input-Ereignis gelöscht, damit ein korrigierter Titel abgeschickt werden kann. Nutzerinhalte werden über textContent ausgegeben und niemals als HTML eingefügt.
daisyUI Designsystem: Ein echter Dialog enthält eine Momentaufnahme zur Prüfung
Ein echter Dialog enthält eine Momentaufnahme zur Prüfung
„Einladung prüfen“ kopiert den aktuellen Titel, das Format, die Sitzplätze und die Materialien in eine Momentaufnahme und ruft dann dialog.showModal auf. Die Klasse modal sorgt für daisyUI-Styling, während der Browser das native Dialogverhalten bereitstellt. Über aria-labelledby wird der Dialog mit seiner Überschrift beschriftet. Mit Escape kann die Prüfung ohne Speichern geschlossen werden.
„Weiter bearbeiten“ schließt den Dialog und lässt das Formular unverändert. „Entwurf lokal speichern“ schließt ihn und gibt die genaue Momentaufnahme in einem Statusbereich bekannt. Die Meldung weist darauf hin, dass keine Einladungen versendet wurden. Der Vorgang simuliert bewusst keinen erfolgreichen E-Mail-Versand: Das Beispiel enthält weder eine Empfängerliste noch einen Versanddienst.
daisyUI Designsystem: Zurücksetzen und Bearbeiten haben sichtbare Auswirkungen
Zurücksetzen und Bearbeiten haben sichtbare Auswirkungen
Wenn ein Feld geändert wird, aktualisiert sich die Karte sofort und ein zuvor angezeigter Speicherhinweis wird ausgeblendet. So kann eine veraltete Erfolgsmeldung nicht so wirken, als bezöge sie sich auf eine neuere, noch nicht gespeicherte Einladung. Beim Zurücksetzen wird gewartet, bis der Browser die Formularstandardwerte wiederhergestellt hat. Anschließend wird die Vorschau anhand dieser tatsächlichen Werte neu aufgebaut. Das unabhängig ausgewählte Theme bleibt erhalten.
Die dekorative Grafik aus drei Formen übernimmt ihre Füllfarbe von primary-content und reagiert daher ebenso wie die Typografie auf Theme-Änderungen. Sie ist mit aria-hidden gekennzeichnet, da sie keine Informationen zu Sitzplätzen oder Format vermittelt. Der sichtbare Vorschautitel und die Fußzeile enthalten die relevanten Inhalte.
Ungültige Eingaben verhindern die Überprüfung und weisen auf das Titelfeld hin.
Mit Escape wird die Überprüfung geschlossen, ohne ein gespeichertes Ergebnis zu erzeugen.
Wird nach dem Speichern etwas bearbeitet, wird das alte Ergebnis entfernt; das aktuelle Theme bleibt erhalten.
daisyUI-Designsystem: Ein kleiner CSS-Build mit expliziter Quellenerkennung
Ein kleines CSS-Build mit expliziter Quellenerkennung
Die bereitgestellte Einrichtung verwendet die Tailwind-CLI, eine lokale input.css und die drei oben gezeigten Quelldateien. source(none) deaktiviert die umfassende automatische Suche, und die explizite source-Direktive verweist auf die HTML, die die Komponente und Utility-Klassen enthält. Dadurch richtet sich das generierte CSS in diesem Beispiel nach dem tatsächlich vorhandenen Markup.
Die Build-Ausgabe wird mit dem ursprünglichen Layout-Stylesheet kombiniert; die Interaktion übernimmt einfaches JavaScript. Die eigenständige Vorschau bindet das Ergebnis direkt ein und benötigt keine externen Ressourcen. Ein Vite-, Astro- oder React-Projekt kann stattdessen die übliche Tailwind-Integration verwenden. Dabei müssen jedoch die Liste der aktivierten Themes erhalten bleiben und die Quelldateien mit den Klassen berücksichtigt werden.
Hintergründe in Primary-Farbe werden stets mit Text in der Farbe primary-content kombiniert.
Der Bereich bleibt ein natives Eingabefeld mit min, max und step.
Der Dialog wird mit showModal geöffnet, nicht über eine rein visuelle open-Klasse.
Lokales Entwurfsverhalten
Live-Vorschau, unveränderlicher Prüfungsstand, Theme-Auswahl und native Validierung.
javascript
const q=s=>document.querySelector(s),form=q('#invitation'),dialog=q('#review');let snapshot;
function update(){const title=q('#title').value.trim(),seats=q('#seats').value,format=q('[name="format"]:checked').value,materials=q('#materials').checked;q('#preview-title').textContent=title||'Your workshop title';q('#seat-count').value=seats;q('#preview-seats').textContent=`${seats} seats`;q('#preview-format').textContent=format;q('#preview-materials').textContent=materials?'Materials included':'Bring your own materials';q('#result').hidden=true;}
q('#theme').addEventListener('change',e=>document.documentElement.dataset.theme=e.target.value);form.addEventListener('input',update);form.addEventListener('reset',()=>setTimeout(update,0));form.addEventListener('submit',e=>{e.preventDefault();snapshot={title:q('#title').value.trim(),seats:q('#seats').value,format:q('[name="format"]:checked').value,materials:q('#materials').checked};if(snapshot.title.length<5){q('#title').setCustomValidity('Enter at least five non-space characters.');q('#title').reportValidity();return;}q('#review-copy').textContent=`${snapshot.title} · ${snapshot.format} · ${snapshot.seats} seats · ${snapshot.materials?'Materials included':'Bring your own materials'}`;dialog.showModal();});q('#title').addEventListener('input',()=>q('#title').setCustomValidity(''));q('#back').onclick=()=>dialog.close();q('#approve').onclick=()=>{dialog.close();q('#result').hidden=false;q('#result').textContent=`Local draft saved: ${snapshot.title}, ${snapshot.seats} seats. No invitations were sent.`;};update();
Speichern Sie die bereitgestellte Interaktion als app.js.
Viewport und natives Laden von Assets sind enthalten.
04
daisyUI-Designsystem: Einrichtung des Agenten
Ausgangspunkt für die Implementierung
Verifiziert mit daisyUI 5.7.47 und Tailwind CSS 4.3.3. Die Kartengrafik und das Seitenlayout sind eigens gestaltet; die Komponenten-CSS und Emerald-Theme-Werte sind nativ.
css
/* npm install -D [email protected] @tailwindcss/[email protected][email protected] */
/* Save the HTML example as body.html in the same directory as input.css. */
/* input.css */
@import "tailwindcss" source(none);
@source "./body.html";
@plugin "daisyui" {
themes: emerald --default, lofi, night;
}
/* Build: npx @tailwindcss/cli -i ./input.css -o ./output.css --minify */
/* In index.html, link output.css then style.css; include body.html markup. */
/* Load the supplied app.js with <script src="app.js" defer></script>. */
/* Set <html lang="en" data-theme="emerald"> and a viewport meta tag. */
Ein Prompt für dein Projekt
Agenten-Prompt
Verwenden Sie daisyUI 5.7.47 mit dem bereitgestellten Tailwind-4-Build sowie den Themes Emerald, Lo-fi und Night, um das Einladungsstudio nachzubilden. Kombinieren Sie semantische Oberflächenfarben mit den zugehörigen Inhaltsrollen. Behalten Sie die gruppierten nativen Optionsfelder, den Sitzplatzregler mit geraden Schrittweiten, das Kontrollkästchen für Materialien und die Titelvalidierung bei. Bei der Überprüfung wird die aktuelle Einladung in einem nativen Dialog festgehalten. „Lokalen Entwurf speichern“ bestätigt diesen Stand, während spätere Bearbeitungen die Meldung entfernen. Setzen Sie das Formular unabhängig vom ausgewählten Theme zurück und geben Sie nicht vor, Einladungen seien versendet worden.
05
daisyUI-Designsystem: Quellen und Geltungsbereich
daisyUI 5.7.47 und Tailwind CSS 4.3.3. Die Emerald-Werte sind themespezifisch. Der lokale Entwurf speichert keine Daten dauerhaft und versendet keine Einladungen.
