Ein nativer Preline-Sitzungsplaner mit verknüpften Tabs, einem eingeschränkten Input-Number-Plugin, installierten Theme-Aliasen, echten Tailwind-Skalen und einer lokalen Materialkostenschätzung, die sich mit der ausgewählten Sitzung aktualisiert.
Vergleichen Sie drei eigens entwickelte Kreativsitzungen, ändern Sie die Gruppengröße und speichern Sie eine ausdrücklich lokale Materialkostenschätzung.
Preline 4.2.0 HSTabs und HSInputNumber mit Tailwind CSS 4.3.3 und dem mitgelieferten Standard-Theme. · Implementierungsreferenz
02
Preline UI Designsystem-Referenz
Preline npm 4.2.0 mit Tailwind CSS 4.3.3; Standard-Theme aus dem installierten Paket. Auf der Marketing-/Dokumentationswebsite kann ein Banner für eine neuere Version erscheinen; das ausführbare Beispiel ist daher ausdrücklich auf eine Version festgelegt. Theme-Aliase bleiben Aliase; es werden keine Hexadezimalwerte geschätzt.
Preline UI-Designsystem: Preline verbindet Utility-Markup mit Verhaltens-Plugins
Preline verbindet Utility-Markup mit Verhaltens-Plugins
Der Planer verwendet zwei native Preline-Plugins: HSTabs wählt ein Sitzungspanel aus, und HSInputNumber steuert begrenzte Schaltflächen zum Erhöhen und Verringern. Tailwind-Klassen übernehmen den Großteil der visuellen Gestaltung. Die Illustration der Sitzung und die Budgetberechnung sind Teil der Anwendung und gehören nicht zu einer fiktiven All-in-one-Buchungskomponente.
Diese Unterscheidung ist wichtig, wenn Sie das Beispiel übernehmen. Allein durch die Installation des Pakets JavaScript werden weder die Utility-Klassen kompiliert noch das Markup der Anwendung bereitgestellt. Umgekehrt bleibt das Verhalten von Tabs und Zahlenfeldern unvollständig, wenn Sie nur HTML kopieren, ohne die Plugins zu initialisieren. Die vollständige Integration weiter unten führt alle Teile ausdrücklich auf.
Preline UI-Designsystem: Semantische Aliase bis zu ihren Palettenrollen nachvollziehen
Semantische Aliase bis zu ihren Palettenrollen nachvollziehen
Im mitgelieferten standardmäßigen hellen Theme verweist --primary auf --color-primary-600, dessen zugrunde liegende Primärfarbpalette blau ist. Die primäre Vordergrundfarbe wird zu Weiß aufgelöst; für Hover, Fokus und den aktiven Status wird die Rolle der Stufe 700 verwendet. Der ausgewählte Tab und die Schaltfläche „Speichern“ greifen über semantische Utility-Klassen auf dieselbe Farbfamilie zurück.
Für Karten werden --card und --card-line verwendet, für das Mengenfeld --layer und --layer-line. Die Trennung dieser Rollen macht zukünftige Theme-Änderungen besser vorhersehbar, als überall feste weiße und graue Klassen zu verteilen. Die Tabelle behält die offiziellen Aliase bei, statt berechnete Näherungswerte als Quell-Tokens auszugeben.
Preline UI-Designsystem: Die tatsächliche Tailwind-Skala verwenden und eigene Ausnahmen kennzeichnen
Die tatsächliche Tailwind-Skala verwenden und eigene Ausnahmen kennzeichnen
Seitentitel und Kostenschätzung verwenden text-3xl, der Sitzungstitel text-2xl und der Formulartext text-sm. Der Karteninnenabstand p-5 entspricht bei der standardmäßigen Abstandseinheit 1.25rem. Der größere Seiteninnenabstand sm:p-8 beginnt am kleinen Tailwind-Breakpoint bei 640px, während das ursprüngliche Raster bei 760px auf eine Spalte wechselt.
Das lokale Stylesheet verwendet system-ui und lädt die optionalen, in der Preline-Theme-Datei benannten Schriftarten nicht. Bei 280px umbrechen die Tabs in zwei Zeilen und die Gruppenkarte wird unter die Sitzung verschoben. Dies sind bewusste Entscheidungen zur Gestaltung der Anwendung und keine Behauptung, dass jedes Preline-Layout dieselbe Geometrie aufweist.
Preline UI-Designsystem: Tab-Steuerelemente und Panels über stabile IDs miteinander verknüpfen
Tab-Steuerelemente und Panels über stabile IDs miteinander verknüpfen
Jeder Tab enthält in data-hs-tab einen Verweis auf ein eindeutiges Panel. aria-controls des Tabs und aria-labelledby des Panels wiederholen diese Verknüpfung für unterstützende Technologien. Genau ein initialer Tab trägt active und aria-selected=true; die übrigen Panels sind anfangs ausgeblendet. HSTabs aktualisiert diese Zustände bei der Navigation durch die Nutzenden.
Der aktive visuelle Stil verwendet hs-tab-active:bg-primary und hs-tab-active:text-primary-foreground. Diese Varianten stammen aus Prelines variants.css. Fehlt dieser Import, kann der ausgewählte Zustand visuell uneindeutig sein, selbst wenn JavaScript die Klassen korrekt ändert. Die Anwendung erkennt Änderungen der Auswahl, um die angrenzende Zusammenfassung zu aktualisieren.
Wähle den Ton-Workshop aus und überprüfe Titel, Materialien und Dauer.
Erhöhe die Teilnehmerzahl von zwei auf drei und überprüfe die Schätzung von 54 $.
Speichere den lokalen Plan und ändere dann einen Tab, um die vorherige Bestätigung zurückzusetzen.
Preline UI Designsystem: Plugin-Optionen und Eingabebeschränkungen müssen übereinstimmen
Plugin-Optionen und Eingabebeschränkungen müssen übereinstimmen
Der Mengen-Wrapper legt in data-hs-input-number min auf eins, max auf sechs und step auf eins fest. Das native Zahlenfeld wiederholt diese Beschränkungen. So gilt für die Schaltflächen des Plugins und die Browser-Validierung derselbe zulässige Wertebereich. Eine eingegebene Zahl kann also keine Beschränkung umgehen, die nur im Schaltflächen-Handler vorhanden ist.
Die Zusammenfassung reagiert auf input, change und den change-Callback des Plugins. Bei ungültiger manueller Eingabe wird der Gesamtbetrag durch einen Gedankenstrich ersetzt und „Speichern“ deaktiviert. Vor dem Auslesen des Werts ruft der Speicher-Handler außerdem reportValidity auf. Die Begrenzung auf sechs Personen ist eine beispielhafte Planungsbeschränkung und keine Aussage zur tatsächlichen Verfügbarkeit.
Preline UI Designsystem: Aus dem aktiven Panel statt aus veralteten Beschriftungen berechnen
Mit dem aktiven Panel statt mit veralteten Beschriftungen rechnen
Jedes Panel speichert einen stabilen Sitzungsnamen, Preis und Dauer als Datenattribute. Die Aktualisierungsfunktion liest das sichtbare Panel aus und multipliziert dessen Materialkosten mit der gültigen Gruppengröße. So sind Druckstudio, Ton-Workshop und Zeichenspaziergang tatsächlich unterschiedliche Angebote und nicht bloß Tabs, die dieselbe Platzhalterkarte anzeigen.
Die angezeigte Schätzung umfasst nur die Materialien. In den ursprünglichen Beschreibungen wird erläutert, wofür dieser Betrag steht. Außerdem weist die Seite ausdrücklich darauf hin, dass damit kein Platz gebucht wird. Hinter den Zahlen stehen weder eine Zahlung noch eine Verfügbarkeitsprüfung oder ein externer Zeitplan. Ein echter Buchungsablauf würde separate Systeme und eine serverseitige Validierung erfordern.
Preline UI Designsystem: Den exportierten manuellen Einstiegspunkt dieser Paketversion verwenden
Den exportierten manuellen Eintrag dieser Paketversion verwenden
Das geprüfte Paket in Version 4.2.0 stellt die benannten Exporte HSTabs und HSInputNumber aus preline/non-auto bereit. Das Beispiel importiert sie und ruft ihre autoInit-Methoden auf, sobald das Markup vorhanden ist. Trotz des Namens ist autoInit hier ein expliziter, von der Anwendung ausgelöster Suchlauf und kein impliziter Hook, der beim Laden der Seite das gesamte Paket initialisiert.
Bei der Überprüfung stellten die .mjs-Pfade der einzelnen Plugins keine Standardklasse bereit. Außerdem konnten direkte Importe aus diesen Pfaden aufgrund der Paketmetadaten zu Nebenwirkungen entfernt werden. Mit dem exportierten manuellen Einstiegspunkt ließ sich dieses konkrete Build-Problem beheben. Die Einrichtung zeigt daher den funktionierenden Import für die angegebene Version statt eines ungeprüften generischen Plugin-Imports.
Preline UI Designsystem: Die Bestätigung bei einer Planänderung ungültig machen
Die Bestätigung bei einer Planänderung ungültig machen
„Lokalen Plan speichern“ schreibt einen Statustext mit der genauen Sitzung, der Personenzahl und den Materialkosten und deaktiviert sich anschließend. Jede Änderung der Menge oder des ausgewählten Tabs ruft update auf. Dadurch wird die übliche Erklärung wieder angezeigt und neu berechnet, ob der Plan gespeichert werden kann. Ein zuvor gespeicherter Text kann so nicht einem neuen Plan zugeordnet bleiben.
Beim lokalen Test wurde der Ton-Workshop ausgewählt, die Personenzahl auf drei erhöht und der daraus resultierende Status mit 54 $ überprüft. Außerdem wurde die tatsächlich gerenderte Seite bei 280 px untersucht. Eine statische Gesamtsumme oder eine Schaltfläche, die lediglich ihre Beschriftung ändert, würde nicht belegen, dass die beiden nativen Plugins und der Anwendungsstatus miteinander verbunden sind.
Verwende für das genaue lokale Ergebnis einen Statusbereich.
Ungültige Werte dürfen nicht in die berechnete Summe einfließen.
Behalte beim Anpassen des Markups stabile Tab- und Panel-IDs bei.
Preline UI Designsystem: Theme, Varianten und tatsächliches Quell-Markup kompilieren
Theme, Varianten und tatsächliches Quell-Markup kompilieren
Das Stylesheet importiert zuerst Tailwind, anschließend die Preline-Varianten und das mitgelieferte Standard-Theme. Explizite Quellpfade umfassen das lokale HTML, die Anwendungs-JavaScript und die Preline-Distributionsdateien. Dadurch stehen zustandsabhängige Hilfsklassen im generierten CSS zur Verfügung. Das ursprüngliche Layout-Stylesheet wird nach diesen Importen eingebunden.
Die eigenständige Vorschau bettet das kompilierte CSS und das gebündelte JavaScript ein und stellt keine CDN-Anfrage. In einem Produktionsprojekt können dieselben Ausgabedateien separat bereitgestellt werden. Beziehe Dateipfade relativ zum tatsächlichen CSS-Einstiegspunkt. Im reproduzierbaren Beispiel unten liegen alle Quelldateien im Projektstamm, damit keine versteckten Abhängigkeiten von temporären Arbeitsverzeichnissen entstehen.
Die Grafik ist ein eigenes CSS und mit aria-hidden ausgeblendet.
Dieses Stylesheet folgt auf die Tailwind- und Preline-Importe.
04
Preline UI Designsystem Einrichtung des KI-Agenten
Ausgangspunkt für die Implementierung
Geprüft mit Preline 4.2.0. Das vollständige Markup, die Logik und das CSS sind oben enthalten. Die Quellpfade in input.css setzen voraus, dass sich alle vier Quelldateien im Projektstamm befinden.
bash
# Create an empty directory and run:
npm init -y
npm install [email protected][email protected] @tailwindcss/[email protected] esbuild
# Save the complete examples above as body.html, app.js and style.css.
# Create input.css with exactly:
# @import "tailwindcss" source(none);
# @import "./node_modules/preline/variants.css";
# @import "./node_modules/preline/css/themes/theme.css";
# @source "./body.html";
# @source "./app.js";
# @source "./node_modules/preline/dist/*.js";
# @import "./style.css";
npx @tailwindcss/cli -i input.css -o bundle.css --minify
npx esbuild app.js --bundle --format=iife --outfile=bundle.js
# Assemble the actual root document without placeholder markup:
node -e 'const f=require("fs");f.writeFileSync("index.html",`<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Studio planner</title><link rel="stylesheet" href="bundle.css"></head><body>${f.readFileSync("body.html","utf8")}<script src="bundle.js"></script></body></html>`)'
# Serve this directory with your existing static server.
Ein Prompt für dein Projekt
Agenten-Prompt
Verwende Preline 4.2.0 mit den benannten Importen HSTabs und HSInputNumber aus preline/non-auto und initialisiere beide Plugins explizit. Behalte die drei Workshops am Studio-Samstag, den Mengenbereich von eins bis sechs und die Materialkosten des ausgewählten Workshops bei. Berechne den Gesamtbetrag anhand des aktiven Panels und der Menge, erkläre den gespeicherten Plan nach jeder Änderung für ungültig und prüfe vor dem lokalen Speichern den zulässigen Zahlenbereich. Binde die vorgegebene Tailwind-Theme- und Variantenkonfiguration sowie das ursprüngliche Layout ein. Mache aus dem lokalen Studioplan keine Buchungs- oder Zahlungsbestätigung.
05
Preline UI Designsystem: Quellen und Geltungsbereich
Native Preline npm 4.2.0 mit Tailwind CSS 4.3.3. Originale Beschreibungen der Sessions, Illustrationen und fiktive Angaben zum Materialbudget. Beim Speichern wird nur der lokale Seitenstatus gespeichert; es erfolgen weder Buchungen noch Zahlungen oder externe Nachrichten.
