Sistema di componenti senza interfaccia · Nuova risorsa
Sistema di progettazione Melt UI.
I builder di store e azioni di Melt UI aggiungono comportamenti accessibili al markup Svelte che gestisci direttamente. Questa guida usa @melt-ui/svelte 0.86.6 per collegare i builder radio, slider e switch tramite attributi, azioni e store scrivibili; è distinto dal più recente API basato sulle runes.
Guida OpenDesign9 capitoli30 voci di riferimentoGuida applicativa originale
01
Anteprima dell'interfaccia del sistema di progettazione sistema di design Melt UI
Modifica l'allineamento, sposta lo slider della spaziatura tra lettere e attiva o disattiva la griglia: il poster originale si aggiorna usando gli store dei builder.
Builder di @melt-ui/svelte 0.86.6 con Svelte 5.57.1; attributi e azioni espliciti, senza bisogno del preprocessore Melt. · Riferimento per l’implementazione
02
Riferimento di progettazione del sistema di progettazione sistema di design Melt UI
Builder di store/azioni verificati di @melt-ui/svelte 0.86.6 in esecuzione con Svelte 5.57.1. Questo è il builder API documentato, non il separato API di nuova generazione basato su runes. Melt è headless; tutti i valori visivi --study-* qui sotto sono configurazioni originali dell'applicazione, riportate integralmente.
Sistema di progettazione sistema di design Melt UI: Melt applica comportamenti al markup che gestisci
Melt applica comportamenti al markup che gestisci
Questo esempio usa i builder API di store/azioni di @melt-ui/svelte 0.86.6. createRadioGroup, createSlider e createSwitch restituiscono builder di elementi e store di stato. I normali button, span e div ricevono gli attributi e le azioni che li collegano al comportamento dei controlli nativi.
Il pacchetto non fornisce la carta verde, la tipografia del poster o la geometria del pannello. Queste scelte sono definite nel foglio di stile originale completo. La documentazione rimanda anche a un API più recente, separato e basato su runes; questa pagina indica deliberatamente la versione verificata dei builder, senza mescolare esempi incompatibili delle due generazioni.
Sistema di progettazione sistema di design Melt UI: applica gli attributi e installa le azioni insieme
Applica gli attributi e installa le azioni insieme
Un elemento ha bisogno sia degli attributi del builder sia della sua azione. L'esempio usa forme come {...$alignRoot} use:alignRoot e {...$alignItem(value)} use:alignItem. Gli attributi definiscono ruoli, stato e posizionamento; l'azione installa il comportamento interattivo e la relativa pulizia.
La sintassi più breve use:melt richiede il preprocessore opzionale di Melt. Senza, il runtime genera un errore specifico invece di applicare silenziosamente il builder. Il codice corretto usa ovunque la sintassi esplicita, quindi la configurazione Vite qui sotto non omette alcuna dipendenza di preprocessing nascosta. Anche ogni cursore dello slider espande gli attributi restituiti e richiama thumb.action.
Sistema di progettazione sistema di design Melt UI: definisci il sistema visivo headless nell'applicazione CSS
Definisci il sistema visivo headless nell'applicazione CSS
I ruoli --study-* distinguono la tela esterna, la superficie dei controlli, il testo, il divisore, l'azione, il focus, la carta del poster e l'accento decorativo. I sei valori di spaziatura definiti per nome vanno da quattro a trentadue pixel. Sono scelte originali che rendono riproducibile questa specifica composizione, non un catalogo di token gestito da Melt.
I radio button selezionati e lo switch usano data-state=checked, mentre le posizioni inline restituite dallo slider determinano la posizione del cursore e dell'intervallo selezionato. Il foglio di stile aggiunge solo geometria e colori. Sostituire queste posizioni native con percentuali calcolate a mano significherebbe duplicare la logica e rischiare di compromettere il supporto all'orientamento o alla direzione.
Sistema di progettazione sistema di design Melt UI: mantieni un solo allineamento selezionato con la navigazione nativa del gruppo
Mantieni un solo allineamento selezionato con la navigazione nativa del gruppo
createRadioGroup parte da left, con orientamento orizzontale e navigazione circolare abilitati. Ogni elemento radio ha un valore stabile: left, center o right. text-align del poster legge direttamente il valore selezionato, quindi la navigazione da tastiera e la selezione con il puntatore modificano la stessa composizione visibile.
Il gruppo riceve l'etichetta accessibile «Allineamento del testo». Le tre opzioni sono controlli radio nativi gestiti dai builder, non normali pulsanti con classi attivate manualmente. Lo stato selezionato è rappresentato sia nella semantica sia dal selettore data-state, usato per applicare il trattamento visivo di riempimento.
Scegli Centro e controlla l'allineamento del poster.
Porta il focus sullo slider Spaziatura tra lettere e premi End per raggiungere 8px.
Disattiva la griglia di layout e salva la composizione locale risultante.
Sistema di progettazione sistema di design Melt UI: usa un array come valore anche con un solo cursore
Usa un array come valore anche con un solo cursore
Lo slider inizia con defaultValue:[2], non con un valore scalare. Il builder installato della versione 0.86.6 espone elements.thumbs, uno store che genera un array, e il template visualizza ogni cursore restituito. Il poster legge $tracking[0] e applica il valore alla spaziatura tra lettere in pixel.
I limiti vanno da zero a otto, con incrementi di uno. Home ed End raggiungono i limiti; i tasti freccia spostano il cursore secondo l'incremento definito. Leggi $tracking[0] per questa composizione con un solo cursore e mantieni il modello basato su array quando ne aggiungi un altro, invece di introdurre un secondo stato scalare indipendente.
Sistema di progettazione sistema di design Melt UI: tieni la guida visiva separata dai valori di progettazione
Tieni la guida visiva separata dai valori di progettazione
createSwitch inizia attivato e il suo stato controlla una classe guides sul poster. Questa classe disegna due gradienti ripetuti e discreti, a intervalli di ventiquattro pixel. Disattivandola, i gradienti scompaiono senza modificare l'allineamento o la spaziatura tra lettere.
L'etichetta visibile «Mostra griglia di layout» è associata all'ID stabile dello switch. Il movimento del cursore usa una transizione CSS, con una regola per la riduzione del movimento. L'illustrazione orbitale decorativa è aria-hidden e non è interattiva; non interferisce con la semantica effettiva dei controlli.
Sistema di progettazione sistema di design Melt UI: coordina gli store scrivibili senza duplicare lo stato dei controlli
Coordina gli store scrivibili senza duplicare lo stato dei controlli
Allineamento, tracciamento e visibilità della griglia restano gli store scrivibili dei builder. Il poster renderizzato legge direttamente questi store: text-align usa l'allineamento, letter-spacing usa il primo valore dello slider e una classe CSS usa il valore checked dello switch. Un modello applicativo separato per le stesse tre impostazioni richiederebbe una sincronizzazione superflua.
Lo snapshot salvato deriva da una firma di questi valori. Ogni modifica annulla la conferma e il ripristino reimposta negli store left, [2] e true. L'array con un solo elemento è importante: assegnare il valore scalare 2 non rispetterebbe il contratto dello slider, anche se è visibile un solo cursore.
Sistema di progettazione sistema di design Melt UI: assegna a ogni builder i suoi attributi, la sua azione e il suo nome
Assegna a ogni builder i suoi attributi, la sua azione e il suo nome
Il gruppo di radio button riceve l'etichetta «Allineamento del testo», il cursore dello slider fa riferimento al testo visibile «Spaziatura tra lettere» e lo switch è associato alla sua etichetta visibile. Questi nomi vanno assegnati agli elementi effettivi gestiti dai builder, non ai wrapper decorativi circostanti.
La sintassi esplicita dei template associa attributi e azioni. Per gli indicatori dello slider, l’elemento restituito include la relativa azione: il ciclo distribuisce quindi gli attributi dell’indicatore e richiama thumb.action. Quando applichi stili alla traccia e all’intervallo, conserva i valori di posizionamento generati dal builder: descrivono lo stato numerico effettivo e la direzione, mentre il foglio di stile definisce il colore e la geometria.
Verifica il risultato calcolato effettivo, non solo l’etichetta numerica.
Mantieni le etichette sugli elementi nativi generati dal builder.
Rispetta la preferenza per la riduzione del movimento nelle transizioni visive personalizzate.
Sistema di design Melt UI Usa il builder verificato API in un normale progetto Svelte
Usa il builder API verificato in un normale progetto Svelte
Il componente completo usa le sottoscrizioni agli store di Svelte con $alignment, $tracking e $grid. Svelte 5 può compilare questa sintassi consolidata per i componenti; il punto di ingresso usa la funzione mount corrente. Non servono librerie di icone personalizzate né pacchetti di fogli di stile, perché l’intero livello visivo è fornito sopra.
La configurazione standard di Vite con Svelte riportata sotto fissa @melt-ui/svelte 0.86.6 e Svelte 5.57.1. Non installa il preprocessore Melt, perché il componente usa già la sintassi esplicita equivalente. Quando passi al pacchetto runes più recente, riscrivi intenzionalmente API invece di modificare soltanto la versione della dipendenza.
Melt UI Esempi di componenti del sistema di design
Composizione completa di builder, store e azioni
createRadioGroup, createSlider e createSwitch associano semantica e comportamento nativi al markup ordinario.
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>
Tutti i token visivi sono originali, non impostazioni predefinite ufficiali di Melt.
Le posizioni dell’indicatore e dell’intervallo dello slider provengono dagli attributi nativi del builder.
La visibilità della griglia decorativa è indipendente dalla spaziatura.
04
Melt UI Configurazione dell’agente del sistema di design
Punto di partenza per l’implementazione
Builder verificati di store/azioni API di @melt-ui/svelte 0.86.6 in Svelte 5.57.1. La sintassi esplicita del builder evita di richiedere il preprocessore Melt facoltativo. Non si tratta del pacchetto runes di nuova generazione API.
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
Un prompt per il tuo progetto
Prompt per l’agente
Usa i builder di store/azioni di @melt-ui/svelte 0.86.6 con Svelte 5 per lo studio di composizione tipografica. Associa sia gli attributi sia le azioni agli elementi createRadioGroup, createSlider e createSwitch; usa la sintassi esplicita fornita, senza richiedere un preprocessore non dichiarato. Mantieni il contratto dello slider con array di un elemento ed elements.thumbs, i valori di allineamento e la visibilità della griglia. Collega gli stili calcolati del poster direttamente a questi store, invalida i feedback salvati dopo ogni modifica e ripristina left, [2] e true. Non mescolare le nuove runes API né un modello di appuntamenti.
05
Melt UI Fonti e ambito del sistema di design
Builder di store/azioni di @melt-ui/svelte 0.86.6 con Svelte 5.57.1. Tutti i token visivi e i contenuti del poster sono originali. Il salvataggio registra soltanto lo stato dell’anteprima locale e non esporta né pubblica un design.
