Die Store- und Action-Builder von Melt UI ergänzen das Svelte-Markup, für das du verantwortlich bist, um barrierefreies Verhalten. Diese Anleitung verwendet @melt-ui/svelte 0.86.6, um Radio-, Slider- und Switch-Builder über ihre Attribute, Actions und beschreibbaren Stores zu verbinden; sie sind nicht mit den neueren Runes API gleichzusetzen.
Ändere die Ausrichtung, bewege den Buchstabenabstandsregler und schalte das Raster um. Das ursprüngliche Poster wird anhand der Builder-Stores aktualisiert.
Builder für @melt-ui/svelte 0.86.6 mit Svelte 5.57.1; explizite Attribute und Actions, kein Melt-Präprozessor erforderlich. · Implementierungsreferenz
02
Designreferenz für das Melt UI-Designsystem
Verifizierte @melt-ui/svelte-Builder für Stores und Aktionen in Version 0.86.6 unter Svelte 5.57.1. Dies ist die dokumentierte Builder-API, nicht die separate Runen-API der nächsten Generation. Melt ist headless; alle unten aufgeführten visuellen Werte für --study-* sind originale Anwendungskonfigurationen, die vollständig bereitgestellt werden.
Melt UI Designsystem: Melt fügt Verhalten zu Markup hinzu, das Ihnen gehört
Melt ergänzt dein eigenes Markup um Verhalten
Dieses Beispiel verwendet die Store-/Aktions-API aus @melt-ui/svelte 0.86.6. createRadioGroup, createSlider und createSwitch geben Element-Builder und Zustands-Stores zurück. Gewöhnliche Buttons, Spans und Divs erhalten die Attribute und Aktionen, die sie mit dem Verhalten nativer Steuerelemente verbinden.
Das Paket stellt weder das grüne Papier noch die Poster-Typografie oder die Geometrie des Bedienfelds bereit. Diese Entscheidungen sind im vollständigen Original-Stylesheet definiert. Die Dokumentation verweist außerdem auf eine separate, neuere Runen-API. Diese Seite nennt bewusst die verifizierte Builder-Version, statt inkompatible Beispiele beider Generationen zu vermischen.
Melt UI Designsystem: Attribute verteilen und Aktionen gemeinsam installieren
Attribute und Actions gemeinsam weitergeben
Ein Element benötigt sowohl die Attribute seines Builders als auch dessen Aktion. Im Beispiel kommen Formen wie {...$alignRoot} use:alignRoot und {...$alignItem(value)} use:alignItem zum Einsatz. Die Attribute übermitteln Rollen, Zustand und Positionierung; die Aktion installiert das interaktive Verhalten und übernimmt die Bereinigung.
Die kürzere Syntax use:melt erfordert den optionalen Melt-Präprozessor. Ohne ihn gibt die Laufzeit einen spezifischen Fehler aus, statt den Builder unbemerkt anzuwenden. Der korrigierte Code verwendet durchgehend die explizite Syntax, sodass die folgende Vite-Konfiguration keine versteckte Präprozessor-Abhängigkeit verschweigt. Auch jeder Slider-Thumb gibt seine zurückgegebenen Attribute aus und ruft thumb.action auf.
Melt UI Designsystem: Das visuelle Headless-System in der Anwendungs-CSS definieren
Das visuelle Headless-System im Anwendungs-CSS definieren
Die Rollen --study-* unterscheiden zwischen äußerer Fläche, Steuerungsfläche, Text, Trennlinie, Aktion, Fokus, Posterpapier und dekorativem Akzent. Die sechs benannten Abstandsgrößen reichen von vier bis zweiunddreißig Pixeln. Es sind eigens gewählte Werte, mit denen sich genau diese Komposition reproduzieren lässt – kein von Melt gepflegter Token-Katalog.
Ausgewählte Optionsfelder und der Schalter verwenden data-state=checked. Die zurückgegebenen Inline-Positionen des Sliders bestimmen, wo Thumb und ausgewählter Bereich erscheinen. Das Stylesheet ergänzt lediglich Geometrie und Farben. Würden diese nativen Positionen durch manuell berechnete Prozentwerte ersetzt, würde das Logik duplizieren und die Unterstützung von Ausrichtung oder Richtung gefährden.
Melt UI Designsystem: Eine Ausrichtung mit nativer Gruppennavigation ausgewählt lassen
Mit der nativen Gruppennavigation eine Ausrichtung ausgewählt halten
createRadioGroup beginnt mit left, horizontaler Ausrichtung und aktivierter Schleife. Jedes Optionsfeld hat einen stabilen Wert: left, center oder right. Die Textausrichtung des Posters übernimmt den ausgewählten Wert direkt, sodass Tastaturnavigation und Auswahl per Mauszeiger dieselbe sichtbare Komposition beeinflussen.
Die Gruppe erhält die zugängliche Beschriftung „Textausrichtung“. Die drei Optionen sind native, Builder-gestützte Optionsfelder und keine gewöhnlichen Buttons mit manuell umgeschalteten Klassen. Ihr Auswahlzustand spiegelt sich sowohl in der Semantik als auch im data-state-Selektor wider, der die gefüllte Darstellung steuert.
Wählen Sie „Zentriert“ und überprüfen Sie die Ausrichtung des Posters.
Fokussieren Sie den Regler für den Zeichenabstand und drücken Sie Ende, um 8px zu erreichen.
Schalten Sie das Layoutraster aus und speichern Sie die resultierende lokale Komposition.
Melt UI Designsystem: Den Wert auch bei einem Thumb als Array behandeln
Den Wert auch bei einem Thumb als Array behandeln
Der Slider beginnt mit defaultValue:[2], nicht mit einem einzelnen Wert. Der installierte Builder in Version 0.86.6 stellt elements.thumbs bereit, einen Store, der ein Array erzeugt; die Vorlage rendert jeden zurückgegebenen Thumb. Das Poster liest $tracking[0] aus und wendet den Wert als Zeichenabstand in Pixeln an.
Die Grenzen liegen bei null und acht, mit einer Schrittweite von eins. Pos1 und Ende führen zu den Grenzwerten; die Pfeiltasten verschieben den Wert in den festgelegten Schritten. Für diese Komposition mit einem Thumb lesen Sie $tracking[0] aus. Behalten Sie beim Hinzufügen eines weiteren Thumbs das Array-Modell bei, statt einen zweiten, unabhängigen Einzelwert einzuführen.
Melt UI Designsystem: Visuelle Hilfslinien von den Designwerten getrennt halten
Visuelle Orientierungshilfe und Designwerte getrennt halten
createSwitch beginnt im eingeschalteten Zustand; sein Zustand steuert eine guides-Klasse am Poster. Diese Klasse zeichnet zwei dezente, sich wiederholende Rasterverläufe mit einem Abstand von vierundzwanzig Pixeln. Beim Ausschalten werden die Verläufe entfernt, ohne Ausrichtung oder Zeichenabstand zu verändern.
Die sichtbare Beschriftung „Layoutraster anzeigen“ ist mit der stabilen ID des Schalters verknüpft. Die Bewegung des Schalterknopfs wird mit einem CSS-Übergang animiert; eine Einstellung für reduzierte Bewegung ist ebenfalls vorhanden. Die dekorative Orbit-Illustration ist mit aria-hidden verborgen und interaktivitätslos; sie konkurriert nicht mit der Semantik des tatsächlichen Steuerelements.
Melt UI Designsystem: Schreibbare Stores koordinieren, ohne den Steuerungszustand zu duplizieren
Schreibbare Stores koordinieren, ohne den Steuerungszustand zu duplizieren
Ausrichtung, Zeichenabstand und Sichtbarkeit des Rasters bleiben schreibbare Stores der Builder. Das gerenderte Poster liest diese Stores direkt aus: text-align verwendet die Ausrichtung, letter-spacing den ersten Sliderwert und eine CSS-Klasse den Schaltzustand des Schalters. Ein separates Anwendungsmodell für dieselben drei Einstellungen würde unnötigen Synchronisierungsaufwand verursachen.
Der gespeicherte Schnappschuss wird aus einer Signatur dieser Werte abgeleitet. Jede Änderung hebt die Bestätigung auf, und beim Zurücksetzen werden left, [2] und true wieder in die Stores geschrieben. Das Array mit einem Element ist wichtig: Die Zuweisung des Skalars 2 würde nicht dem Wertevertrag des Schiebereglers entsprechen, obwohl nur ein Thumb sichtbar ist.
Melt UI Designsystem: Jedem Builder seine Attribute, Aktion und Bezeichnung zuweisen
Jedem Builder seine Attribute, Aktion und Bezeichnung zuweisen
Die Optionsgruppe erhält die Beschriftung „Textausrichtung“, der Schieberegler-Thumb verweist auf den sichtbaren Text „Buchstabenabstand“ und der Schalter ist seiner sichtbaren Beschriftung zugeordnet. Diese Bezeichnungen gehören auf die tatsächlichen, vom Builder erzeugten Elemente, nicht auf umgebende dekorative Wrapper.
Die explizite Template-Syntax fügt Attribute und Aktionen gemeinsam ein. Bei Schieberegler-Thumbs enthält das zurückgegebene Element auch seine Aktion, daher bindet die Schleife die Thumb-Attribute ein und ruft thumb.action auf. Beim Gestalten der Schiene und des Bereichs muss die Positionierungsausgabe des Builders erhalten bleiben: Sie beschreibt den tatsächlichen numerischen Zustand und die Richtung, während das Stylesheet Farbe und Geometrie festlegt.
Prüfe die tatsächlich berechnete Ausgabe, nicht nur die numerische Beschriftung.
Lass die Beschriftungen auf den nativen Builder-Elementen.
Berücksichtige bei benutzerdefinierten visuellen Übergängen reduzierte Bewegung.
Melt UI Designsystem: Den verifizierten Builder API in einem normalen Svelte-Projekt verwenden
Den verifizierten Builder API in einem gewöhnlichen Svelte-Projekt verwenden
Die vollständige Komponente verwendet Svelte-Store-Abonnements mit $alignment, $tracking und $grid. Svelte 5 kann diese etablierte Komponentensyntax kompilieren; der Einstiegspunkt verwendet die aktuelle Mount-Funktion. Eine benutzerdefinierte Icon-Bibliothek oder ein Stylesheet-Paket ist nicht erforderlich, da die gesamte visuelle Ebene oben bereitgestellt wird.
Die folgende standardmäßige Vite-Svelte-Konfiguration fixiert @melt-ui/svelte 0.86.6 und Svelte 5.57.1. Der Melt-Präprozessor wird nicht installiert, da die Komponente bereits die explizite äquivalente Syntax verwendet. Bei der Migration zum neueren Runes-Paket sollte API bewusst umgeschrieben werden, statt nur die Abhängigkeitsversion zu ändern.
Vollständige Kombination aus Store- und Aktions-Buildern
createRadioGroup, createSlider und createSwitch fügen gewöhnlichem Markup native Semantik und Verhalten hinzu.
svelte
<script>
import {createRadioGroup,createSlider,createSwitch} from '@melt-ui/svelte';
const {elements:{root:alignRoot,item:alignItem},states:{value:alignment}}=createRadioGroup({defaultValue:'left',orientation:'horizontal',loop:true});
const {elements:{root:trackingRoot,range:trackingRange,thumbs},states:{value:tracking}}=createSlider({defaultValue:[2],min:0,max:8,step:1});
const {elements:{root:gridRoot},states:{checked:grid}}=createSwitch({defaultChecked:true});
let saved='';let previous='';
$: current=`${$alignment}|${$tracking[0]}|${$grid}`;
$: if(current!==previous){saved='';previous=current}
function save(){saved=`Saved locally: ${$alignment} aligned, ${$tracking[0]}px tracking, grid ${$grid?'on':'off'}.`}
function reset(){alignment.set('left');tracking.set([2]);grid.set(true);saved=''}
</script>
<main class="poster-shell"><header><p class="eyebrow">TYPE COMPOSITION · LIVE STUDY</p><h1>A small change. A different rhythm.</h1><p>Use native Melt UI builders to change the alignment, tracking and guide visibility of an original typographic poster.</p></header><div class="poster-layout"><section class="controls"><h2>Composition</h2><p class="control-label" id="alignment-label">Text alignment</p><div {...$alignRoot} use:alignRoot aria-labelledby="alignment-label" class="alignment">{#each ['left','center','right'] as value}<button {...$alignItem(value)} use:alignItem class="align-option">{value[0].toUpperCase()+value.slice(1)}</button>{/each}</div><div class="tracking-control"><p class="control-label" id="tracking-label">Letter spacing <strong>{$tracking[0]}px</strong></p><div {...$trackingRoot} use:trackingRoot class="slider"><div {...$trackingRange} use:trackingRange class="slider-range"></div>{#each $thumbs as thumb}<span {...thumb} use:thumb.action aria-labelledby="tracking-label" class="slider-thumb"></span>{/each}</div><div class="scale"><span>0px</span><span>8px</span></div></div><div class="grid-control"><label for="show-grid">Show layout grid</label><button id="show-grid" {...$gridRoot} use:gridRoot class="switch"><span></span></button></div><p class="hint">The grid is a visual aid. It does not change the poster’s text or spacing.</p><button class="primary" on:click={save} disabled={!!saved}>Save composition</button><button class="reset" on:click={reset}>Restore initial settings</button><p class="result" role="status">{saved||'This study changes only the local preview.'}</p></section><section class="poster" class:guides={$grid} style:text-align={$alignment} aria-label="Live typographic poster"><div class="poster-top"><span>TYPE / 2026</span><span>STUDY 04</span></div><div class="poster-orbit" aria-hidden="true"><i></i><b></b></div><div class="poster-title" style:letter-spacing={`${$tracking[0]}px`}><span>SPACE</span><span>TO</span><span>THINK.</span></div><div class="poster-bottom"><p>A pause between<br/>one idea and the next.</p><span>Original type study<br/>{$alignment} · {$tracking[0]}px</span></div></section></div></main>
Alle visuellen Tokens sind eigens erstellt und keine offiziellen Melt-Standardwerte.
Positionen von Schieberegler-Thumb und -Bereich stammen aus nativen Builder-Attributen.
Die Sichtbarkeit des dekorativen Rasters ist unabhängig vom Abstand.
04
Melt UI Designsystem: Agent einrichten
Ausgangspunkt für die Implementierung
Verifizierte Store-/Aktions-API von @melt-ui/svelte 0.86.6 in Svelte 5.57.1. Die explizite Builder-Syntax macht den optionalen Melt-Präprozessor überflüssig. Dies ist nicht das separate Runes-API der nächsten Generation.
javascript
// npm create vite@latest melt-type-study -- --template svelte
// cd melt-type-study && npm install
// npm install [email protected] @melt-ui/[email protected]
// Save the complete examples as src/App.svelte and src/style.css.
// src/main.js:
import {mount} from 'svelte';
import App from './App.svelte';
import './style.css';
mount(App, {target:document.querySelector('#app')});
// index.html: <div id="app"></div><script type="module" src="/src/main.js"></script>
// npm run dev
Ein Prompt für dein Projekt
Agenten-Prompt
Verwende die Store-/Aktions-Builder von @melt-ui/svelte 0.86.6 mit Svelte 5 für die typografische Kompositionsstudie. Füge sowohl Attribute als auch Aktionen an die Elemente von createRadioGroup, createSlider und createSwitch an; verwende die bereitgestellte explizite Syntax, statt einen nicht erwähnten Präprozessor vorauszusetzen. Behalte das Array mit einem Element und den elements.thumbs-Vertrag des Schiebereglers, die Ausrichtungswerte und die Sichtbarkeit des Rasters bei. Binde die berechneten Stile des Plakats direkt an diese Stores, setze gespeichertes Feedback nach Änderungen zurück und stelle left, [2] und true wieder her. Verwende weder das neuere Runes-API noch ein Terminmodell.
05
Melt UI Designsystem: Quellen und Geltungsbereich
Store-/Aktions-Builder von @melt-ui/svelte 0.86.6 mit Svelte 5.57.1. Alle visuellen Tokens und Plakattexte sind eigens erstellt. Beim Speichern wird nur der lokale Vorschauzustand festgehalten; ein Design wird weder exportiert noch veröffentlicht.
