Système de composants sans interface · Nouvelle ressource
Melt UI — Système de design.
Les générateurs de stores et d’actions de Melt UI ajoutent un comportement accessible au balisage Svelte que vous contrôlez. Ce guide utilise @melt-ui/svelte 0.86.6 pour relier les générateurs de boutons radio, de curseurs et d’interrupteurs par leurs attributs, leurs actions et leurs stores inscriptibles ; il s’agit d’une solution distincte de la version plus récente basée sur les runes API.
Guide OpenDesign9 chapitres30 entrées de référenceGuide de l’application d’origine
01
Aperçu de l’interface du système de design Melt UI
Modifiez l’alignement, déplacez le curseur d’interlettrage et activez ou désactivez la grille ; l’affiche d’origine se met à jour à partir des stores du générateur.
Générateurs @melt-ui/svelte 0.86.6 avec Svelte 5.57.1 ; attributs et actions explicites, sans préprocesseur Melt requis. · Référence de mise en œuvre
02
Référence de conception du système de design Melt UI
Générateurs de stores/actions @melt-ui/svelte 0.86.6 vérifiés et exécutés avec Svelte 5.57.1. Il s’agit du générateur API documenté, et non de l’API runes de nouvelle génération distincte API. Melt est sans interface ; toutes les valeurs visuelles --study-* ci-dessous sont une configuration d’application originale, fournie dans son intégralité.
Système de design Melt UI : Melt ajoute un comportement au balisage que vous gérez
Melt ajoute un comportement au balisage que vous gérez
Cet exemple utilise les générateurs de stores/actions API de @melt-ui/svelte 0.86.6. createRadioGroup, createSlider et createSwitch renvoient des générateurs d’éléments et des stores d’état. Les boutons, spans et divs ordinaires reçoivent les attributs et les actions qui les relient au comportement natif des contrôles.
Le package ne fournit ni le papier vert, ni la typographie de l’affiche, ni la géométrie du panneau. Ces choix sont définis dans la feuille de style originale complète. La documentation mentionne également une API runes plus récente distincte API ; cette page présente délibérément la version vérifiée du générateur au lieu de mélanger des exemples incompatibles des deux générations.
Système de design Melt UI : répartir les attributs et installer les actions ensemble
Répartir les attributs et installer les actions ensemble
Un élément doit recevoir à la fois les attributs de son générateur et son action. L’exemple utilise des syntaxes telles que {...$alignRoot} use:alignRoot et {...$alignItem(value)} use:alignItem. Les attributs définissent les rôles, l’état et le positionnement ; l’action installe le comportement interactif et son nettoyage.
La syntaxe plus courte use:melt nécessite le préprocesseur facultatif de Melt. Sans lui, l’exécution renvoie une erreur précise au lieu d’ajouter silencieusement le générateur. Le code corrigé utilise partout la syntaxe explicite : la configuration Vite ci-dessous ne dépend donc d’aucun prétraitement implicite. Chaque poignée du curseur répartit également les attributs renvoyés et appelle thumb.action.
Système de design Melt UI : définir le système visuel sans interface dans l’application CSS
Définir le système visuel sans interface dans l’application CSS
Les rôles --study-* distinguent le canevas extérieur, la surface de contrôle, le texte, le séparateur, l’action, le focus, le papier de l’affiche et l’accent décoratif. Les six espacements nommés vont de quatre à trente-deux pixels. Ce sont des choix originaux, pensés pour reproduire cette composition particulière, et non un catalogue de jetons géré par Melt.
Les boutons radio cochés et le commutateur utilisent data-state=checked, tandis que les positions intégrées renvoyées par le curseur déterminent l’emplacement de la poignée et de la plage sélectionnée. La feuille de style ne fait qu’ajouter leur géométrie et leurs couleurs. Remplacer ces positions natives par des pourcentages calculés manuellement reviendrait à dupliquer la logique et risquerait de compromettre la prise en charge de l’orientation ou du sens de lecture.
Système de design Melt UI : conserver une seule option d’alignement sélectionnée grâce à la navigation native du groupe
Conserver une seule option d’alignement sélectionnée grâce à la navigation native du groupe
createRadioGroup commence par l’option left, avec une orientation horizontale et une navigation circulaire activées. Chaque option radio possède une valeur stable : left, center ou right. La propriété text-align de l’affiche lit directement la valeur sélectionnée ; la navigation au clavier et la sélection au pointeur modifient donc la même composition visible.
Le groupe reçoit le libellé accessible « Alignement du texte ». Les trois options sont des contrôles radio natifs gérés par le builder, et non de simples boutons dont les classes seraient modifiées manuellement. L’état sélectionné est reflété à la fois dans la sémantique et dans le sélecteur data-state utilisé pour le style de remplissage.
Choisissez « Centré » et observez l’alignement de l’affiche.
Placez le focus sur le slider « Espacement des lettres », puis appuyez sur End pour atteindre 8px.
Désactivez la grille de mise en page et enregistrez la composition locale obtenue.
Système de design Melt UI : traitez la valeur comme un tableau, même avec un seul curseur
Traiter la valeur comme un tableau, même avec une seule poignée
Le slider commence par defaultValue:[2], et non par une valeur scalaire. La version 0.86.6 du builder installé expose elements.thumbs, un store qui produit un tableau, et le template affiche chaque curseur renvoyé. L’affiche lit $tracking[0] et l’applique comme valeur d’espacement des lettres en pixels.
Les limites vont de zéro à huit, par pas de un. Home et End permettent d’atteindre les limites ; les touches fléchées avancent selon le pas défini. Lisez $tracking[0] pour cette composition à un seul curseur et conservez le modèle de tableau lors de l’ajout d’un autre curseur, au lieu d’introduire un second état scalaire indépendant.
Système de design Melt UI : séparez le repère visuel des valeurs de conception
Séparer le guide visuel des valeurs de conception
createSwitch est activé par défaut, et son état commande une classe guides sur l’affiche. Cette classe dessine deux dégradés répétitifs subtils qui forment une grille à intervalles de vingt-quatre pixels. La désactivation du switch supprime les dégradés sans modifier l’alignement ni l’espacement des lettres.
Le libellé visible « Afficher la grille de mise en page » est associé à l’identifiant stable du switch. Le déplacement de son curseur est animé par une transition CSS, avec une règle de remplacement pour la réduction des animations. L’illustration décorative en orbite est masquée aux technologies d’assistance avec aria-hidden et n’est pas interactive ; elle ne concurrence pas la sémantique des véritables contrôles.
Système de design Melt UI : coordonnez les stores modifiables sans dupliquer l’état des contrôles
Coordonner les stores modifiables sans dupliquer l’état des contrôles
L’alignement, l’espacement des lettres et la visibilité de la grille restent gérés par les stores modifiables des builders. L’affiche affichée lit directement ces stores : text-align utilise alignment, letter-spacing utilise la première valeur du slider, et une classe CSS utilise la valeur d’activation du switch. Un modèle d’application distinct pour ces trois mêmes paramètres entraînerait un travail de synchronisation inutile.
L’instantané enregistré est dérivé d’une signature de ces valeurs. Toute modification efface la confirmation, et la réinitialisation rétablit left, [2] et true dans les stores. Le tableau à un élément est important : affecter la valeur scalaire 2 ne respecterait pas le contrat de valeur du slider, même si un seul curseur est visible.
Système de design Melt UI : attribuez à chaque builder ses attributs, son action et son nom
Attribuez à chaque builder ses attributs, son action et son nom
Le groupe radio reçoit le libellé « Alignement du texte », le curseur du slider est associé au texte visible « Espacement des lettres » et le switch est associé à son libellé visible. Ces noms doivent être attribués aux éléments réels gérés par le builder, et non à des conteneurs décoratifs autour d’eux.
La syntaxe explicite du template applique ensemble les attributs et les actions. Pour les curseurs du slider, l’élément renvoyé inclut son action ; la boucle diffuse donc les attributs du curseur et appelle thumb.action. Lorsque vous stylisez la piste et la plage, préservez les valeurs de positionnement produites par le builder : elles décrivent l’état numérique réel et le sens de progression, tandis que la feuille de style définit la couleur et la géométrie.
Vérifiez le résultat réellement calculé, pas seulement la valeur numérique affichée.
Conservez les libellés sur les éléments natifs du builder.
Respectez la réduction des animations pour les transitions visuelles personnalisées.
Système de design Melt UI : utilisez le builder vérifié API dans un projet Svelte standard
Utiliser le générateur vérifié API dans un projet Svelte classique
Le composant complet utilise les abonnements aux stores de Svelte avec $alignment, $tracking et $grid. Svelte 5 peut compiler cette syntaxe de composant éprouvée ; le point d’entrée utilise sa fonction mount actuelle. Aucune bibliothèque d’icônes ni aucun package de feuille de style personnalisés ne sont nécessaires, car toute la couche visuelle est fournie ci-dessus.
La configuration Svelte standard de Vite ci-dessous fixe les versions de @melt-ui/svelte à 0.86.6 et de Svelte à 5.57.1. Elle n’installe pas le préprocesseur Melt, car le composant utilise déjà la syntaxe explicite équivalente. Lors de la migration vers le nouveau package runes, réécrivez intentionnellement le API au lieu de simplement changer la version de la dépendance.
Melt UI Exemples de composants du système de design
Composition complète des builders store/action
createRadioGroup, createSlider et createSwitch ajoutent une sémantique native et un comportement au balisage ordinaire.
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>
Tous les jetons visuels sont originaux ; ils ne correspondent pas aux valeurs par défaut officielles de Melt.
La position du curseur et de la plage du slider provient des attributs natifs du builder.
La visibilité de la grille décorative est indépendante de l’espacement.
04
Melt UI Configuration de l’agent IA du système de design
Point de départ de l’implémentation
Builders store/action API vérifiés de @melt-ui/svelte 0.86.6 avec Svelte 5.57.1. La syntaxe explicite du builder évite d’avoir à installer le préprocesseur Melt facultatif. Il ne s’agit pas du package runes de nouvelle génération distinct 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 pour votre projet
Prompt pour l’agent IA
Utilisez les builders store/action de @melt-ui/svelte 0.86.6 avec Svelte 5 pour cette étude de composition typographique. Ajoutez à la fois des attributs et des actions aux éléments createRadioGroup, createSlider et createSwitch ; utilisez la syntaxe explicite fournie plutôt que de dépendre d’un préprocesseur non mentionné. Préservez le tableau à un élément du slider et le contrat elements.thumbs, les valeurs d’alignement et la visibilité de la grille. Liez les styles calculés de l’affiche directement à ces stores, invalidez le retour de confirmation enregistré après toute modification et réinitialisez les valeurs à left, [2] et true. N’intégrez ni le nouveau package runes API ni un modèle de rendez-vous.
05
Melt UI Sources et périmètre du système de design
Builders store/action de @melt-ui/svelte 0.86.6 avec Svelte 5.57.1. Tous les jetons visuels et le contenu de l’affiche sont originaux. L’enregistrement ne conserve que l’état de l’aperçu local ; il n’exporte ni ne publie aucun design.
