Os construtores de store/action de Melt UI associam comportamentos acessíveis à marcação Svelte que você controla. Este guia usa @melt-ui/svelte 0.86.6 para conectar os construtores de radio, slider e switch por meio de seus atributos, actions e stores graváveis; é diferente da abordagem mais recente de API, baseada em runas.
Guia OpenDesign9 capítulos30 entradas de referênciaGuia de aplicação original
01
Prévia da interface do sistema de design Melt UI
Altere o alinhamento, mova o controle deslizante de espaçamento entre letras e alterne a grade; o pôster original é atualizado com base nas stores do construtor.
Construtores de @melt-ui/svelte 0.86.6 com Svelte 5.57.1; atributos e ações explícitos, sem necessidade do pré-processador do Melt. · Referência de implementação
02
Referência de design do sistema de design Melt UI
Construtores de store/action de @melt-ui/svelte 0.86.6 verificados e executados no Svelte 5.57.1. Este é o API documentado dos construtores, não o API separado da próxima geração, baseado em runes. O Melt é headless; todos os valores visuais --study-* abaixo são configurações originais do aplicativo, fornecidas por completo.
O Melt do sistema de design Melt UI associa comportamentos à marcação que você controla
Melt associa comportamento à marcação que você controla
Este exemplo usa o API de store/action de @melt-ui/svelte 0.86.6. createRadioGroup, createSlider e createSwitch retornam construtores de elementos e stores de estado. Botões, spans e divs comuns recebem os atributos e as ações que os conectam ao comportamento dos controles nativos.
O pacote não fornece o papel verde, a tipografia do cartaz nem a geometria do painel. Essas escolhas são definidas na folha de estilos original completa. A documentação também aponta para um API mais recente, separado e baseado em runes; esta página identifica deliberadamente a versão verificada dos construtores, em vez de misturar exemplos incompatíveis das duas gerações.
O sistema de design Melt UI distribui atributos e instala ações em conjunto
Combine atributos spread e actions
Um elemento precisa dos atributos e da ação do construtor. O exemplo usa formas como {...$alignRoot} use:alignRoot e {...$alignItem(value)} use:alignItem. Os atributos carregam funções, estado e posicionamento; a ação instala o comportamento interativo e a limpeza.
A sintaxe abreviada use:melt exige o pré-processador opcional do Melt. Sem ele, o ambiente de execução lança um erro específico, em vez de associar silenciosamente o construtor. O código corrigido usa sintaxe explícita em toda parte, portanto a configuração do Vite abaixo não omite uma dependência oculta de pré-processamento. Da mesma forma, cada controle deslizante espalha os atributos retornados e invoca thumb.action.
Defina no aplicativo o sistema visual headless do sistema de design Melt UI CSS
Defina o sistema visual sem interface no CSS da aplicação
Os papéis --study-* distinguem a tela externa, a superfície de controle, o texto, o divisor, a ação, o foco, o papel do cartaz e o destaque decorativo. Os seis valores de espaçamento nomeados vão de quatro a trinta e dois pixels. São escolhas originais que tornam reproduzível esta composição específica, não um catálogo de tokens mantido pelo Melt.
Os botões de opção selecionados e o botão de alternância usam data-state=checked, enquanto as posições em linha retornadas pelo controle deslizante determinam a localização do controle e do intervalo selecionado. A folha de estilos acrescenta apenas a geometria e as cores. Substituir essas posições nativas por percentuais calculados manualmente duplicaria a lógica e poderia comprometer o suporte à orientação ou à direção.
Mantenha uma opção de alinhamento selecionada com a navegação nativa do grupo do sistema de design Melt UI
Mantenha um alinhamento selecionado com a navegação nativa do grupo
createRadioGroup começa em left, com a orientação horizontal e o retorno cíclico ativados. Cada opção de rádio tem um valor estável: left, center ou right. O alinhamento do texto do cartaz lê diretamente o valor selecionado, portanto a navegação pelo teclado e a seleção com o ponteiro afetam a mesma composição visível.
O grupo recebe o rótulo acessível Text alignment. As três opções são controles de rádio nativos associados aos construtores, não botões comuns com classes alternadas manualmente. O estado selecionado se reflete tanto na semântica quanto no seletor data-state usado para preencher o elemento visual.
Escolha Center e confira o alinhamento do cartaz.
Foque o controle deslizante Letter spacing e pressione End para chegar a 8px.
Desative a grade de layout e salve a composição local resultante.
Trate o valor como um array mesmo com um único controle deslizante — sistema de design Melt UI
Trate o valor como um array mesmo com apenas um controle deslizante
O controle deslizante começa com defaultValue:[2], não com um valor escalar. O construtor instalado da versão 0.86.6 expõe elements.thumbs, uma store que gera um array, e o modelo renderiza cada controle retornado. O cartaz lê $tracking[0] e aplica o valor como espaçamento entre letras em pixels.
Os limites vão de zero a oito, em incrementos de um. Home e End levam aos limites; as teclas de seta avançam conforme o incremento definido. Leia $tracking[0] para esta composição com um único controle deslizante e mantenha o modelo de array ao adicionar outro, em vez de introduzir um segundo estado escalar sem relação com o primeiro.
Mantenha um guia visual separado dos valores de design — sistema de design Melt UI
Mantenha um guia visual separado dos valores de design
createSwitch começa ativado, e seu estado controla uma classe de guias no cartaz. Essa classe desenha dois gradientes de grade sutis e repetidos, com intervalos de vinte e quatro pixels. Ao desativá-la, os gradientes desaparecem sem alterar o alinhamento ou o espaçamento entre letras.
O rótulo visível Show layout grid é associado ao ID estável do botão de alternância. O movimento do controle usa uma transição CSS, com uma regra para movimento reduzido. A ilustração orbital decorativa tem aria-hidden e não é interativa; ela não interfere na semântica dos controles reais.
Coordene stores graváveis sem duplicar o estado dos controles — sistema de design Melt UI
Coordene stores graváveis sem duplicar o estado dos controles
O alinhamento, o espaçamento entre letras e a visibilidade da grade continuam sendo as stores graváveis dos construtores. O cartaz renderizado lê essas stores diretamente: text-align usa o alinhamento, letter-spacing usa o primeiro valor do controle deslizante e uma classe CSS usa o valor selecionado do botão de alternância. Um modelo separado do aplicativo para essas mesmas três configurações criaria trabalho desnecessário de sincronização.
O estado salvo é derivado de uma assinatura desses valores. Qualquer alteração limpa a confirmação, e a redefinição grava novamente left, [2] e true nas stores. O array de um elemento é importante: atribuir o valor escalar 2 não corresponderia ao contrato de valor do controle deslizante, embora apenas um controle esteja visível.
Forneça a cada construtor seus atributos, sua ação e seu nome — sistema de design Melt UI
Forneça a cada construtor seus atributos, sua ação e seu nome
O grupo de opções de rádio recebe o rótulo Text alignment, o controle deslizante faz referência ao texto visível Letter spacing e o botão de alternância é associado ao seu rótulo visível. Esses nomes devem estar nos elementos reais controlados pelos construtores, não em elementos decorativos ao redor.
A sintaxe explícita do modelo instala atributos e ações em conjunto. Para os controles deslizantes, o item retornado inclui sua ação; por isso, o loop distribui os atributos do controle e invoca thumb.action. Preserve a saída de posicionamento do construtor ao estilizar a trilha e o intervalo: ela descreve o estado numérico e a direção reais, enquanto a folha de estilos fornece a cor e a geometria.
Confira o resultado computado real, não apenas o rótulo numérico.
Mantenha os rótulos nos elementos nativos associados aos construtores.
Respeite a preferência por movimento reduzido nas transições visuais personalizadas.
Use o Melt UI verificado dos construtores em um projeto Svelte comum — sistema de design API
Use o construtor verificado API em um projeto Svelte comum
O componente completo usa assinaturas de stores do Svelte com $alignment, $tracking e $grid. O Svelte 5 pode compilar essa sintaxe estabelecida de componentes; a entrada usa a função mount atual. Não é necessária nenhuma biblioteca de ícones personalizada nem nenhum pacote de folha de estilos, pois toda a camada visual é fornecida acima.
A configuração padrão do Vite com Svelte abaixo fixa @melt-ui/svelte 0.86.6 e Svelte 5.57.1. Ela não instala o pré-processador do Melt porque o componente já usa a sintaxe explícita equivalente. Ao migrar para o pacote mais recente baseado em runes, reescreva intencionalmente o API, em vez de apenas alterar a versão da dependência.
Exemplos de componentes do sistema de design Melt UI
Composição completa com construtores de store/action
createRadioGroup, createSlider e createSwitch associam semântica e comportamento nativos à marcação comum.
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 os tokens visuais são originais, não padrões oficiais do Melt.
As posições do controle deslizante e do intervalo vêm dos atributos nativos dos construtores.
A visibilidade da grade decorativa é independente do espaçamento.
04
Configuração do agente para o sistema de design Melt UI
Ponto de partida para implementação
API de store/action verificado de @melt-ui/svelte 0.86.6 no Svelte 5.57.1. A sintaxe explícita dos construtores dispensa o pré-processador opcional do Melt. Este não é o API separado da próxima geração, baseado em 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
Um prompt para seu projeto
Prompt para agente de IA
Use os construtores de stores/actions de @melt-ui/svelte 0.86.6 com Svelte 5 no estudo de composição tipográfica. Associe atributos e actions aos elementos de createRadioGroup, createSlider e createSwitch; use a sintaxe explícita fornecida, sem exigir um pré-processador não mencionado. Preserve o array de um elemento do slider e o contrato de elements.thumbs, os valores de alinhamento e a visibilidade da grade. Vincule os estilos calculados do cartaz diretamente a essas stores, invalide o feedback salvo após alterações e redefina para left, [2] e true. Não misture as runes mais recentes API nem um modelo de agendamento.
05
Fontes e escopo do sistema de design Melt UI
Construtores de stores/actions de @melt-ui/svelte 0.86.6 com Svelte 5.57.1. Todos os tokens visuais e o conteúdo do cartaz são originais. Salvar registros apenas no estado de pré-visualização local; isso não exporta nem publica um design.
