Kobalte stellt Headless-Komponenten für Solid bereit, darunter numerische Eingabefelder mit separaten Roh- und formatierten Werten, den Aufbau zusammengesetzter Checkboxen und Buttons mit gedrücktem Zustand. Dieser Leitfaden verbindet diese Grundelemente über einen Rezeptskalierer mit abgeleiteten Mengen und zurücksetzbaren Zutaten-Checkboxen mit Solid-Signals.
Kobalte 0.13.14 mit Solid 1.9.15; native Headless-Primitiven und vollständiges Original-CSS. · Implementierungsreferenz
02
Designreferenz für das Kobalte-Designsystem
Kobalte 0.13.14 stellt Headless-Primitiven für Solid bereit, aber keine verbindliche visuelle Skala. Jede Farbe und Abmessung mit dem Präfix recipe-* gehört zur vollständigen ursprünglichen Anwendungskonfiguration. Die Namen und Zustandsattribute von API wurden anhand des installierten Pakets und der offiziellen Komponentendokumentation überprüft.
Kobalte-Designsystem: Kobalte-Komponenten mit Solid Signals verbinden
Kobalte-Komponenten mit Solid Signals verbinden
Die Komponente verwendet Solid Signals für Portionen, zusammengestellte Zutaten und die Stecknadel. createMemo leitet die Gültigkeit aus dem numerischen Signal ab, und For rendert eine stabile Zutatenliste. Die kontrollierten Props von Kobalte greifen direkt auf diese Signals zu; für Aktualisierungen sind weder ein separater Form-Provider noch ein Zustandsadapter nach Art von React erforderlich.
NumberField, Checkbox und ToggleButton werden über ihre jeweiligen Komponenteneinstiegspunkte importiert. Sie erfüllen unterschiedliche Aufgaben: Das Zahlenfeld verarbeitet editierbare numerische Eingaben, jede Checkbox steht für eine zusammengestellte Zutat und der Toggle hält die Stecknadel für das Rezept. Die Rechen- und Invalidierungsregeln bleiben in Anwendungsfunktionen, statt in visuelle Selektoren eingebettet zu sein.
Kobalte-Designsystem: Numerischen Zustand und formatierten Text getrennt halten
Numerischen Zustand und formatierten Text getrennt halten
NumberField erhält rawValue={portions()} und onRawValueChange={update}. Das numerische Signal steuert die Multiplikation direkt, während die Eingabe die Formatierung und die Bearbeitung durch den Benutzer übernimmt. Würde formatierter Anzeigetext wieder in die Berechnung eingespeist, wären Annahmen zu Trennzeichen oder Gebietsschema nötig, die das native Primitiv bereits berücksichtigt.
Das Beispiel erlaubt eine bis acht ganze Portionen, mit einer Schrittweite von eins und maximumFractionDigits auf null gesetzt. Ein separates berechnetes Prädikat prüft zusätzlich Endlichkeit, Ganzzahligkeit und Grenzwerte, da ein bearbeitbares Feld vorübergehend einen unvollständigen oder ungültigen Wert enthalten kann. Solange der Wert ungültig ist, werden die Gesamtmengen als Gedankenstrich angezeigt und die Zutaten-Checkboxen deaktiviert. Die Benutzeroberfläche zeigt keine plausibel wirkende, aber falsche Menge an, als hätte der Benutzer einen gültigen Wert eingegeben.
Kobalte-Designsystem: Setze das Feld aus seinem nativen Label und seinen Meldungen zusammen
Das Feld aus seinem nativen Label und seinen Meldungen zusammensetzen
Das Zahlenfeld enthält Label, DecrementTrigger, Input, IncrementTrigger, Description und ErrorMessage. Die sichtbare Beschreibung erläutert sowohl den zulässigen Bereich als auch die Folgen einer Änderung der Portionszahl. Die Trigger haben aussagekräftige Beschriftungen: „Weniger Portionen“ und „Mehr Portionen“. Ihre symbolischen Minus- und Pluszeichen müssen daher nicht allein den vollständigen zugänglichen Namen vermitteln.
validationState wechselt anhand des Anwendungsprädikats zwischen valid und invalid. ErrorMessage gehört zu diesem nativen Feld und nicht in einen unabhängigen Absatz an anderer Stelle auf der Seite. Für ein Formular, das übermittelt wird, stellt Kobalte außerdem ein HiddenInput zur Serialisierung des Rohwerts bereit. Dieses lokale Beispiel enthält keines, da es weder einen Übermittlungsendpunkt noch eine Formular-Payload hat.
Kobalte-Designsystem: Speichere die Zutaten-Auswahl in einem unveränderlichen Set
Die Zutatenauswahl in einem unveränderlichen Set verwalten
Für jede Zutat kommt der vollständige Aufbau einer Checkbox zum Einsatz: Input, Control, Indicator und Label. Das echte Eingabeelement erhält Semantik und Tastaturbedienung, während das sichtbare Steuerelement das Häkchen und die ursprünglichen Zustandsstile übernimmt. Das Label enthält sowohl den Namen der Zutat als auch die Menge, sodass die benötigte Menge Teil des Eintrags ist, den der Leser zusammenstellt.
mark erstellt aus der vorherigen Auswahl ein neues Set, bevor eine ID hinzugefügt oder entfernt wird. Das vorhandene Set einfach zu verändern, würde kein ebenso zuverlässiges Signal-Update auslösen. Die angezeigte Anzahl liest die Größe des Sets aus, und jede Checkbox prüft anhand der stabilen Zutaten-ID, ob sie darin enthalten ist. Bei einer Änderung der Portionszahl wird die gesamte Auswahl aufgehoben, denn 320 Gramm zusammenzustellen bedeutet nicht, dass damit auch der neue Bedarf von 400 Gramm gedeckt ist.
Verknüpfe jeden sichtbaren Zutatenname mit Checkbox.Label.
Behalte Checkbox.Input bei, auch wenn das sichtbare Kästchen individuell gestaltet ist.
Verwende stabile IDs für die Auswahl und erstelle bei jeder Aktualisierung ein neues Set.
Kobalte-Designsystem: Verwende für eine dauerhaft gespeicherte lokale Auswahl einen Toggle
Für eine dauerhaft gespeicherte lokale Auswahl einen Toggle verwenden
Die Anheftfunktion ist ein ToggleButton mit pressed und onChange, kein gewöhnlicher Button, der lediglich seine Beschriftung ändert. Der pressed-Zustand wird in der nativen Semantik und im Selektor data-pressed abgebildet. Die Beschriftung ändert sich zu „Angeheftet“ mit einem Häkchen, und der Status daneben erklärt, dass dies nur die lokale Vorschau betrifft.
Das Anheften ändert weder die Zutatenmengen noch die Auswahl. Bei einer Änderung der Portionszahl werden die Zutaten-Checkboxen zurückgesetzt, die Anheftung bleibt jedoch bestehen, da das Rezept unverändert ist. „Standardrezept wiederherstellen“ setzt alle drei Zustandsbereiche gemeinsam zurück: vier Portionen, ein leeres Zutaten-Set und eine nicht gedrückte Anheftung. Diese unterschiedlichen Rücksetzregeln orientieren sich an der Bedeutung des jeweiligen Zustands, statt bei jeder Interaktion alles zu löschen.
Kobalte-Designsystem: Gib kopflosen Steuerelementen eine reproduzierbare visuelle Gestaltung
Headless-Steuerelementen eine reproduzierbare visuelle Konfiguration geben
Das Rezept-Stylesheet unterscheidet zwischen der Bearbeitungsfläche der numerischen Eingabe, den Stepper-Triggern und der Auswahlfunktion der Checkbox. Der gedämpfte Text der Zutaten wird erst nach dem Abhaken angewendet. Die Mengen bleiben lesbar, damit der Benutzer die zusammengestellte Menge weiterhin mit der aktuellen Portionszahl vergleichen kann.
Die Abstände betragen vier, acht, zwölf, sechzehn, vierundzwanzig und zweiunddreißig Pixel. Die ursprüngliche Typografie kombiniert eine serifenlose Systemschrift für Steuerelemente mit Georgia für den Rezepttitel. Neben einem einundzwanzig Pixel großen visuellen Kontrollkästchen steht ein vollständig zugehöriges Label; das Label bietet die praktischere Aktivierungsfläche. Diese genauen Werte sind im vollständigen CSS enthalten, damit sich das Beispiel ohne Rätselraten anhand eines Screenshots nachbilden lässt.
Kobalte-Designsystem: Verkleinere das Layout, ohne Informationen auszublenden
Verkleinere das Layout, ohne Informationen auszublenden
Im breiten Layout stehen sich eine flexible Rezeptkarte und ein 280 Pixel breites Portionsfeld gegenüber. Bei 760 Pixeln wird das Layout einspaltig. Die Überschrift der Karte kann umbrechen, Zutatenbeschriftungen können in eine weitere Zeile fließen und die Menge bleibt kompakt und untrennbar. Am kleinsten Breakpoint werden die Innenabstände des Felds und die Schrift der Beschriftungen leicht verkleinert, statt die Mengen auszublenden.
Die Salatillustration ist ein Original von CSS und als dekorativ gekennzeichnet. Rezeptname, Portionszahl und Zutatenmengen vermitteln die Bedeutung unabhängig von der Illustration. Achte darauf, dass die vollständigen Zutatenbeschriftungen und Mengen erhalten bleiben, wenn du die Illustration änderst oder die Karte schmaler machst; sie sind die eigentlichen Eingaben für die Aufgabe des Zusammenstellens.
Kobalte-Designsystem: Behandle Änderungen der Menge als Aktualisierung abhängiger Zustände
Mengenänderungen als Aktualisierung abhängiger Zustände behandeln
Jede Portion trägt insgesamt 250 Gramm zu den fünf Zutaten bei. Der Wechsel von vier auf fünf Portionen erhöht die angezeigte Gesamtmenge von 1.000 auf 1.250 Gramm und den Bedarf an Orangen von 320 auf 400 Gramm. Bereits abgehakte Zutaten werden zurückgesetzt, da sich die Auswahl auf die alten Mengen bezog. Die Anheftung des Rezepts bleibt unverändert, da es sich weiterhin um dasselbe Rezept handelt.
Die Aktualisierungsfunktion vergleicht den eingehenden Wert zunächst mithilfe von Object.is mit dem aktuellen Signalwert. Ein unveränderter Rückruf sollte weder die Checkliste zurücksetzen noch eine Mengenänderung ankündigen. Bei ungültigen Werten werden Mengen ausgeblendet und das Zusammenstellen deaktiviert; die Fehlermeldung erläutert dann den zulässigen Bereich. So lassen sich Zwischenschritte der Eingabe berücksichtigen, ohne dass eine ungültige Zahl eine irreführende Gesamtmenge ergibt.
Wähle bei vier Portionen „Orangenspalten“ aus.
Erhöhe die Portionszahl auf fünf und bestätige 400 g Orange, insgesamt 1.250 g und null zusammengestellte Zutaten.
Pinne das Rezept an, setze dann die Standardwerte zurück und bestätige, dass der gesamte lokale Zustand zurückgesetzt wird.
Kobalte Designsystem: Solid-Build verwenden und das vollständige Stylesheet einbinden
Einen Solid-Build verwenden und das vollständige Stylesheet einbinden
Die Einrichtung verwendet das Vite-Solid-Template, legt die verifizierten Versionen von Solid und Kobalte fest und mountet die Anwendung in einem expliziten App-Root. Die oben gezeigte Komponente und das Stylesheet sind vollständige Dateien. Für dieses Beispiel sind weder ein Theme-Provider noch ein Icon-Paket, eine externe Schriftart oder ein Backend erforderlich.
Achte bei der Integration in eine andere Anwendung darauf, Framework-Compiler und Komponentengenerierung aufeinander abzustimmen. Ein React-Transform wandelt Solid JSX nicht in eine korrekte Kobalte-Anwendung um. Ebenso solltest du eine künftige Hauptversion von Kobalte API anhand der zugehörigen Dokumentation prüfen, bevor du die festgelegte Abhängigkeit ersetzt. Die Rezeptmengen und die Palette sind Beispieldaten der Anwendung. Sie lassen sich anpassen, ohne den Vertrag der nativen Primitive zu ändern.
Natives Zahlenfeld, Checkbox-Aufbau und Umschaltfläche mit explizitem Verhalten bei ungültigen Eingaben und beim Zurücksetzen.
jsx
import {createSignal,createMemo,For} from 'solid-js';
import {NumberField} from '@kobalte/core/number-field';
import {Checkbox} from '@kobalte/core/checkbox';
import {ToggleButton} from '@kobalte/core/toggle-button';
export default function App(){
const[portions,setPortions]=createSignal(4),[checked,setChecked]=createSignal(new Set()),[pinned,setPinned]=createSignal(false),[notice,setNotice]=createSignal('');
const ingredients=[{id:'orange',name:'Orange segments',grams:80},{id:'beans',name:'Cooked white beans',grams:90},{id:'leaves',name:'Salad leaves',grams:25},{id:'fennel',name:'Thinly sliced fennel',grams:40},{id:'dressing',name:'Citrus dressing',grams:15}];
const valid=createMemo(()=>Number.isFinite(portions())&&Number.isInteger(portions())&&portions()>=1&&portions()<=8);
function update(value){if(Object.is(value,portions()))return;setPortions(value);setChecked(new Set());setNotice('Portions changed. Ingredient checks were cleared for the new quantities.')}
function mark(id,value){setChecked(previous=>{const next=new Set(previous);value?next.add(id):next.delete(id);return next})}
function reset(){setPortions(4);setChecked(new Set());setPinned(false);setNotice('Restored four portions and an unchecked ingredient list.')}
return <main class="recipe-shell"><header><p class="eyebrow">KITCHEN NOTEBOOK · REACTIVE RECIPE CARD</p><h1>A brighter bowl, sized for your table.</h1><p>Change the portions, check the scaled ingredients and pin the recipe locally. The quantities are original sample data for this interface.</p></header><div class="recipe-layout"><section class="recipe-card"><div class="salad-art" aria-hidden="true"><div class="plate"><i/><b/><em/><span/><strong/></div></div><div class="recipe-heading"><div><p class="eyebrow">CITRUS & WHITE BEAN SALAD</p><h2>Fresh, crisp, generous.</h2></div><ToggleButton class="pin" pressed={pinned()} onChange={value=>{setPinned(value);setNotice(value?'Recipe pinned in this local preview.':'Recipe unpinned in this local preview.')}} aria-label="Pin recipe">{pinned()?'Pinned ✓':'Pin recipe'}</ToggleButton></div><p class="recipe-description">Sweet citrus, tender beans and crisp fennel. Use the checklist to gather the amounts for your chosen portion count.</p><div class="ingredient-title"><h3>Ingredients</h3><span>{checked().size} / 5 gathered</span></div><div class="ingredients"><For each={ingredients}>{ingredient=><Checkbox class="ingredient" checked={checked().has(ingredient.id)} onChange={value=>mark(ingredient.id,value)} disabled={!valid()}><Checkbox.Input/><Checkbox.Control class="check-control"><Checkbox.Indicator>✓</Checkbox.Indicator></Checkbox.Control><Checkbox.Label class="ingredient-label"><span>{ingredient.name}</span><strong>{valid()?ingredient.grams*portions()+' g':'—'}</strong></Checkbox.Label></Checkbox>}</For></div></section><aside class="portion-panel"><h2>Make it yours</h2><NumberField rawValue={portions()} onRawValueChange={update} minValue={1} maxValue={8} step={1} formatOptions={{maximumFractionDigits:0}} validationState={valid()?'valid':'invalid'} class="portion-field"><NumberField.Label class="field-label">Portions</NumberField.Label><div class="stepper"><NumberField.DecrementTrigger aria-label="Fewer portions">−</NumberField.DecrementTrigger><NumberField.Input/><NumberField.IncrementTrigger aria-label="More portions">+</NumberField.IncrementTrigger></div><NumberField.Description class="field-description">Choose 1–8 whole portions. Changing the quantity clears ingredient checks.</NumberField.Description><NumberField.ErrorMessage class="field-error">Enter a whole number from 1 to 8.</NumberField.ErrorMessage></NumberField><div class="portion-total"><span>Total ingredients</span><strong>{valid()?ingredients.reduce((s,x)=>s+x.grams,0)*portions()+' g':'—'}</strong></div><h3>A simple preparation order</h3><ol><li>Gather the scaled amounts and drain the cooked beans.</li><li>Combine the orange, fennel and leaves in a bowl.</li><li>Add the beans and dressing, then toss gently.</li></ol><button class="reset" onClick={reset}>Restore default recipe</button><p role="status" class="notice">{notice()||(pinned()?'Recipe pinned in this local preview.':'No shopping order or account update is created.')}</p></aside></div></main>
}
Diese Werte mit dem Präfix recipe-* sind eigene Anwendungsentscheidungen, keine offiziellen Kobalte-Tokens.
Das vollständige Stylesheet umfasst ein responsives Layout und sichtbare Fokuszustände.
04
Kobalte Designsystem: Einrichtung des AI-Agenten
Ausgangspunkt für die Implementierung
Das Solid-Vite-Template stellt den erforderlichen Solid-JSX-Compiler bereit. Die vollständigen Beispiele für App.jsx und style.css oben enthalten den gesamten Anwendungscode und alle Stile. Ein Provider oder externer Dienst ist nicht erforderlich.
javascript
// npm create vite@latest kobalte-recipe -- --template solid
// cd kobalte-recipe && npm install
// npm install [email protected] @kobalte/[email protected]
// Save the complete examples as src/App.jsx and src/style.css.
// src/index.jsx:
import {render} from 'solid-js/web';
import App from './App.jsx';
import './style.css';
render(() => <App />, document.getElementById('app'));
// index.html: <div id="app"></div><script type="module" src="/src/index.jsx"></script>
// npm run dev
Ein Prompt für dein Projekt
Agenten-Prompt
Verwende Kobalte 0.13.14 mit Solid 1.9.15, um die reaktive Rezeptkarte nachzubilden. Behalte NumberField rawValue/onRawValueChange, die Grenzen von eins bis acht, die Validierung ganzer Portionen und den vollständigen Aufbau aus Label/Description/ErrorMessage bei. Leite Zutatenmengen in Gramm und Summen aus dem Portionssignal ab. Bei einer tatsächlichen Mengenänderung wird das unveränderliche Set markierter IDs geleert, die Rezept-Pin bleibt jedoch erhalten. Verwende die nativen Checkbox-Teile sowie ToggleButton pressed/onChange. Deaktiviere das Zusammenstellen, wenn die Menge ungültig ist, und setze beim Zurücksetzen vier Portionen, keine Markierungen und keinen Pin. Binde das vollständige Originalrezept CSS ein; der gesamte Zustand bleibt lokal.
05
Kobalte Designsystem: Quellen und Geltungsbereich
Verifiziert mit Kobalte 0.13.14 und Solid 1.9.15. Alle recipe-*-Tokens, die CSS-Illustration und die Zutatenmengen sind eigens erstellte Beispieldaten. Anpinnen und Zusammenstellen bleiben lokaler Zustand; es ist weder ein Konto noch ein Einkaufsdienst oder ein dauerhaft gespeicherter Rezeptbestand angebunden.
