Sistema de componentes sin estilos · Nuevo recurso
Sistema de diseño Melt UI.
Los generadores de tiendas y acciones de Melt UI añaden comportamiento accesible al marcado de Svelte que controlas. Esta guía usa @melt-ui/svelte 0.86.6 para conectar generadores de radio, controles deslizantes y conmutadores mediante sus atributos, acciones y tiendas escribibles; es una opción distinta de la API más reciente de runas API.
Guía de OpenDesign9 capítulos30 entradas de referenciaGuía de aplicación original
01
Vista previa de la interfaz del sistema de diseño Melt UI
Cambia la alineación, mueve el control deslizante del espaciado entre letras y activa o desactiva la cuadrícula; el póster original se actualiza con los stores del constructor.
Constructores de @melt-ui/svelte 0.86.6 con Svelte 5.57.1; atributos y acciones explícitos, sin necesidad del preprocesador de Melt. · Referencia de implementación
02
Referencia de diseño del sistema de diseño Melt UI
Generadores de stores y acciones de @melt-ui/svelte 0.86.6 verificados en ejecución con Svelte 5.57.1. Este es el generador documentado API, no los runes de nueva generación API, que son independientes. Melt no incluye estilos; todos los valores visuales --study-* que aparecen a continuación son configuración original de la aplicación, proporcionada íntegramente.
Sistema de diseño Melt UI: Melt añade comportamiento al marcado que controlas
Melt añade comportamiento al marcado que controlas
Este ejemplo usa los generadores de store y acción API de @melt-ui/svelte 0.86.6. createRadioGroup, createSlider y createSwitch devuelven generadores de elementos y stores de estado. Los atributos y las acciones conectan botones, spans y divs corrientes con el comportamiento de los controles nativos.
El paquete no proporciona el papel verde, la tipografía del cartel ni la geometría del panel. Esas decisiones se definen en la hoja de estilos original completa. La documentación también hace referencia a unos runes más recientes API, que son independientes; esta página identifica deliberadamente la versión verificada de los generadores en lugar de mezclar ejemplos incompatibles de ambas generaciones.
Sistema de diseño Melt UI: combina la propagación de atributos con la instalación de acciones
Combina atributos spread y acciones en la instalación
Cada elemento necesita tanto los atributos de su generador como su acción. El ejemplo utiliza formas como {...$alignRoot} use:alignRoot y {...$alignItem(value)} use:alignItem. Los atributos aportan roles, estado y posicionamiento; la acción instala el comportamiento interactivo y su limpieza.
La sintaxis abreviada use:melt requiere el preprocesador opcional de Melt. Sin él, el entorno de ejecución genera un error específico en lugar de adjuntar el generador de forma silenciosa. El código corregido usa siempre la sintaxis explícita, por lo que la configuración de Vite que aparece a continuación no omite ninguna dependencia oculta de preprocesamiento. Del mismo modo, cada control deslizante propaga los atributos que devuelve e invoca thumb.action.
Sistema de diseño Melt UI: define el sistema visual sin estilos en la capa de la aplicación CSS
Define el sistema visual sin interfaz en el CSS de la aplicación
Los roles --study-* distinguen el lienzo exterior, la superficie de control, el texto, el separador, la acción, el foco, el papel del cartel y el acento decorativo. Los seis valores de espaciado con nombre abarcan de cuatro a treinta y dos píxeles. Son decisiones originales que permiten reproducir esta composición específica, no un catálogo de tokens mantenido por Melt.
Los botones de opción marcados y el interruptor usan data-state=checked, mientras que las posiciones en línea que devuelve el control deslizante determinan la ubicación del control y del rango seleccionado. La hoja de estilos solo añade geometría y colores. Sustituir esas posiciones nativas por porcentajes calculados manualmente duplicaría la lógica y podría interrumpir la compatibilidad con la orientación o la dirección.
Sistema de diseño Melt UI: mantén una sola alineación seleccionada con la navegación nativa del grupo
Mantén una sola alineación seleccionada con la navegación nativa del grupo
createRadioGroup comienza en left, con la orientación horizontal y el ciclo activados. Cada opción del grupo tiene un valor estable: left, center o right. El valor seleccionado se aplica directamente a text-align del cartel, por lo que la navegación con el teclado y la selección con el puntero afectan a la misma composición visible.
El grupo tiene la etiqueta accesible Alineación del texto. Las tres opciones son controles de opción respaldados por los generadores nativos, no botones corrientes con clases que se alternan manualmente. Su estado marcado se refleja tanto en la semántica como en el selector data-state, que aplica el tratamiento visual de relleno.
Elige Centrar y observa la alineación del cartel.
Enfoca el deslizador Espaciado entre letras y pulsa End para llegar a 8px.
Desactiva la cuadrícula de diseño y guarda la composición local resultante.
Sistema de diseño Melt UI: trata el valor como un array incluso con un solo control deslizante
Trata el valor como una matriz incluso cuando haya un solo control deslizante
El control deslizante comienza con defaultValue:[2], no con un valor escalar. El generador instalado en la versión 0.86.6 expone elements.thumbs, un store que produce un array, y la plantilla representa cada control devuelto. El cartel lee $tracking[0] y aplica el valor como espaciado entre letras en píxeles.
Los límites van de cero a ocho, en incrementos de uno. Home y End llevan a los límites; las teclas de flecha avanzan según el incremento definido. Lee $tracking[0] para esta composición de un solo control deslizante y conserva el modelo de array al añadir otro, en vez de introducir un segundo estado escalar sin relación.
Sistema de diseño Melt UI: mantén la guía visual separada de los valores de diseño
Mantén la guía visual separada de los valores de diseño
createSwitch comienza activado, y su estado controla una clase guides en el cartel. Esa clase dibuja dos gradientes de cuadrícula repetidos y sutiles, separados por intervalos de veinticuatro píxeles. Al desactivarla, los gradientes desaparecen sin cambiar la alineación ni el espaciado entre letras.
La etiqueta visible Mostrar cuadrícula de diseño está asociada al ID estable del interruptor. El movimiento del control se anima con una transición CSS, con una regla alternativa para reducir el movimiento. La ilustración orbital decorativa tiene aria-hidden y no admite interacción; no compite con la semántica de los controles reales.
Sistema de diseño Melt UI: coordina los stores modificables sin duplicar el estado de los controles
Coordina los stores de escritura sin duplicar el estado de control
La alineación, el espaciado y la visibilidad de la cuadrícula siguen siendo los stores modificables de los generadores. El cartel representado lee esos stores directamente: text-align usa la alineación, letter-spacing usa el primer valor del control deslizante y una clase CSS usa el valor marcado del interruptor. Mantener un modelo de aplicación independiente para esos mismos tres ajustes generaría trabajo de sincronización innecesario.
La instantánea guardada se obtiene de una firma de esos valores. Cualquier cambio elimina la confirmación, y el restablecimiento vuelve a escribir left, [2] y true en los stores. La matriz de un elemento es importante: asignar el escalar 2 no cumpliría el contrato de valor del control deslizante, aunque solo se vea un control.
Sistema de diseño Melt UI: asigna a cada constructor sus atributos, acción y nombre
Asigna a cada constructor sus atributos, acción y nombre
El grupo de opciones recibe la etiqueta de alineación del texto, el control deslizante se refiere al texto visible «Espaciado entre letras» y el interruptor está asociado a su etiqueta visible. Esos nombres deben estar en los elementos reales respaldados por constructores, no en contenedores decorativos circundantes.
La sintaxis explícita de la plantilla instala conjuntamente los atributos y las acciones. En el caso de los controles deslizantes, el elemento devuelto incluye su acción, así que el bucle distribuye los atributos del control e invoca thumb.action. Al aplicar estilos a la pista y al rango, conserva el posicionamiento que genera el constructor: describe el estado numérico real y la dirección, mientras que la hoja de estilos proporciona el color y la geometría.
Comprueba el resultado calculado real, no solo la etiqueta numérica.
Mantén las etiquetas en los elementos nativos del constructor.
Respeta la preferencia de movimiento reducido en las transiciones visuales personalizadas.
Sistema de diseño Melt UI: usa el constructor verificado API en un proyecto Svelte convencional
Usa el constructor verificado API en un proyecto Svelte normal
El componente completo usa las suscripciones a stores de Svelte con $alignment, $tracking y $grid. Svelte 5 puede compilar esta sintaxis establecida para componentes; el punto de entrada usa la función de montaje actual. No hace falta ninguna biblioteca de iconos personalizada ni paquete de hojas de estilos, porque toda la capa visual se proporciona arriba.
La configuración estándar de Vite con Svelte que aparece a continuación fija @melt-ui/svelte 0.86.6 y Svelte 5.57.1. No instala el preprocesador de Melt, ya que el componente usa la sintaxis explícita equivalente. Al migrar al paquete más reciente de runes, reescribe API de forma intencionada en lugar de cambiar solo la versión de la dependencia.
Melt UI Ejemplos de componentes del sistema de diseño
Composición completa de constructores de stores y acciones
createRadioGroup, createSlider y createSwitch añaden semántica y comportamiento nativos al marcado común.
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>
Todos los tokens visuales son originales; no son valores predeterminados oficiales de Melt.
Las posiciones del control y del rango del control deslizante proceden de los atributos nativos del constructor.
La visibilidad de la cuadrícula decorativa es independiente del espaciado.
04
Melt UI Configuración del agente de IA del sistema de diseño
Punto de partida para la implementación
API verificados de stores y acciones de @melt-ui/svelte 0.86.6 en Svelte 5.57.1. La sintaxis explícita del constructor evita tener que usar el preprocesador opcional de Melt. No se trata del API independiente de la nueva generación de runes.
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
Una instrucción para tu proyecto
Instrucción para el agente
Usa los constructores de stores y acciones de @melt-ui/svelte 0.86.6 con Svelte 5 para el estudio de composición tipográfica. Añade tanto atributos como acciones a los elementos createRadioGroup, createSlider y createSwitch; utiliza la sintaxis explícita proporcionada en lugar de depender de un preprocesador no indicado. Conserva la matriz de un elemento del control deslizante y el contrato elements.thumbs, los valores de alineación y la visibilidad de la cuadrícula. Vincula los estilos calculados del póster directamente a estos stores, invalida la confirmación guardada después de los cambios y restablece a left, [2] y true. No combines esto con las nuevas API de runes ni con un modelo de citas.
05
Melt UI Fuentes y alcance del sistema de diseño
Constructores de stores y acciones de @melt-ui/svelte 0.86.6 con Svelte 5.57.1. Todos los tokens visuales y el contenido del póster son originales. Guardar solo registra el estado de la vista previa local; no exporta ni publica un diseño.
