Конструкторы хранилищ и действий Melt UI добавляют доступное поведение к разметке Svelte, которой вы управляете. В руководстве @melt-ui/svelte 0.86.6 связывает конструкторы radio, slider и switch через их атрибуты, действия и доступные для записи хранилища; это решение отличается от более нового варианта на runes API.
Билдеры @melt-ui/svelte 0.86.6 с Svelte 5.57.1; явные атрибуты и действия, препроцессор Melt не требуется. · Справочник по реализации
02
Дизайн-референс дизайн-системы Melt UI
Проверенные билдеры store/action из @melt-ui/svelte 0.86.6, работающие в Svelte 5.57.1. Здесь используется документированный билдер API, а не отдельный вариант API нового поколения на рунах. Melt не задаёт визуальное оформление; все значения --study-* ниже — исходные настройки приложения, приведённые полностью.
Дизайн-система Melt UI: Melt добавляет поведение к вашей разметке
Melt добавляет поведение к вашей разметке
В этом примере используются билдеры store/action API из @melt-ui/svelte 0.86.6. createRadioGroup, createSlider и createSwitch возвращают билдеры элементов и хранилища состояния. Атрибуты и действия связывают обычные кнопки, span и div с поведением встроенных элементов управления.
Пакет не предоставляет зелёную бумагу, типографику постера или геометрию панели. Эти решения заданы в полной исходной таблице стилей. В документации также описан отдельный, более новый вариант API на рунах; на этой странице намеренно указан проверенный вариант билдера, чтобы не смешивать несовместимые примеры двух поколений.
Дизайн-система Melt UI: одновременно передавайте атрибуты и подключайте действия
Одновременно передавайте атрибуты и подключайте действия
Элементу нужны и атрибуты билдера, и его действие. В примере используются выражения вида {...$alignRoot} use:alignRoot и {...$alignItem(value)} use:alignItem. Атрибуты задают роли, состояние и позиционирование; действие подключает интерактивное поведение и очистку.
Краткий синтаксис use:melt требует необязательного препроцессора Melt. Без него во время выполнения возникает конкретная ошибка: билдер не подключается незаметно и без предупреждения. В исправленном коде везде используется явный синтаксис, поэтому приведённая ниже настройка Vite не скрывает зависимость от препроцессора. Каждый ползунок также передаёт возвращённые атрибуты и вызывает thumb.action.
Дизайн-система Melt UI: определите визуальную систему безголового компонента в приложении CSS
Определите визуальную систему безголового компонента в приложении CSS
Роли --study-* различают внешнее полотно, поверхность управления, текст, разделитель, действие, фокус, бумагу постера и декоративный акцент. Шесть именованных значений интервалов охватывают диапазон от четырёх до тридцати двух пикселей. Это исходные решения, позволяющие воспроизвести именно эту композицию, а не каталог токенов, поддерживаемый Melt.
Выбранные радиокнопки и переключатель используют data-state=checked, а возвращаемые ползунком встроенные позиции определяют расположение бегунка и выбранного диапазона. Таблица стилей задаёт только их геометрию и цвета. Замена встроенных позиций вычисленными вручную процентами дублировала бы логику и могла бы нарушить поддержку ориентации или направления.
Дизайн-система Melt UI: сохраняйте один выбранный вариант выравнивания с помощью встроенной навигации по группе
Сохраняйте один выбранный вариант выравнивания с помощью встроенной навигации по группе
createRadioGroup изначально выбирает left; горизонтальная ориентация и циклическая навигация включены. У каждого элемента группы есть неизменное значение: left, center или right. Свойство text-align постера напрямую считывает выбранное значение, поэтому навигация с клавиатуры и выбор указателем изменяют одну и ту же видимую композицию.
Группа получает доступную метку «Выравнивание текста». Три варианта — это встроенные радиокнопки, созданные билдерами, а не обычные кнопки с классами, переключаемыми вручную. Выбранное состояние отражается и в семантике, и в селекторе data-state, который задаёт заливку.
Выберите «По центру» и посмотрите, как изменится выравнивание постера.
Перейдите к ползунку «Межбуквенный интервал» и нажмите End, чтобы установить значение 8px.
Отключите сетку и сохраните получившуюся композицию локально.
Дизайн-система Melt UI: используйте массив в качестве значения, даже если ползунок один
Используйте массив в качестве значения, даже если ползунок один
В ползунке задано начальное значение defaultValue:[2], а не скаляр. В установленной версии билдера 0.86.6 доступно хранилище elements.thumbs, возвращающее массив; шаблон отображает каждый возвращённый бегунок. Постер считывает $tracking[0] и использует это значение в пикселях для межбуквенного интервала.
Диапазон — от нуля до восьми с шагом в единицу. Клавиши Home и End устанавливают минимальное и максимальное значения, а клавиши со стрелками перемещают бегунок на заданный шаг. В композиции с одним бегунком читайте $tracking[0]; при добавлении ещё одного сохраните модель массива, а не вводите отдельное, не связанное с ней скалярное состояние.
Дизайн-система Melt UI: отделите визуальную сетку от значений дизайна
Отделите визуальную сетку от значений дизайна
createSwitch изначально включён, а его состояние управляет классом guides на постере. Этот класс создаёт два едва заметных повторяющихся градиента сетки с интервалом в двадцать четыре пикселя. При отключении переключателя градиенты исчезают, а выравнивание и межбуквенный интервал не меняются.
Видимая метка «Показать сетку макета» связана с неизменным ID переключателя. Бегунок переключателя перемещается с переходом CSS; для пользователей, предпочитающих уменьшенное движение, предусмотрено переопределение. Декоративная иллюстрация орбиты скрыта от вспомогательных технологий через aria-hidden и не интерактивна, поэтому не мешает семантике настоящих элементов управления.
Дизайн-система Melt UI: координируйте изменяемые хранилища без дублирования состояния элементов управления
Координируйте изменяемые хранилища без дублирования состояния элементов управления
Выравнивание, интервал и видимость сетки остаются изменяемыми хранилищами билдеров. Отрисованный постер считывает эти хранилища напрямую: выравнивание управляет text-align, первое значение ползунка — letter-spacing, а класс CSS — значением checked переключателя. Отдельная модель приложения для тех же трёх настроек создала бы ненужную задачу синхронизации.
Сохранённый снимок состояния вычисляется по сигнатуре этих значений. При любом изменении подтверждение сбрасывается, а сброс записывает в хранилища left, [2] и true. Важен именно массив из одного элемента: скалярное значение 2 не соответствовало бы контракту ползунка, хотя виден только один бегунок.
Дизайн-система Melt UI: назначьте каждому билдеру атрибуты, действие и название
Назначьте каждому билдеру атрибуты, действие и название
Группа переключателей получает метку «Выравнивание текста», ползунок ссылается на видимый текст «Межбуквенный интервал», а переключатель связан со своей видимой меткой. Эти названия должны назначаться самим элементам, созданным билдерами, а не окружающим декоративным обёрткам.
Явный синтаксис шаблона позволяет одновременно добавлять атрибуты и действия. Для ползунков возвращаемый элемент включает действие, поэтому в цикле нужно раскрыть атрибуты ползунка и вызвать thumb.action. При стилизации дорожки и заполненной части сохраняйте позиционирование, которое предоставляет конструктор: оно отражает фактическое числовое состояние и направление, а таблица стилей задаёт цвет и геометрию.
Проверьте фактический вычисленный результат, а не только числовую подпись.
Оставьте подписи на элементах нативного конструктора.
Учитывайте настройку уменьшения анимации при создании пользовательских визуальных переходов.
Дизайн-система Melt UI: используйте проверенный конструктор API в обычном проекте Svelte
Используйте проверенный билдер API в обычном проекте Svelte
В полном компоненте используются подписки на хранилища Svelte: $alignment, $tracking и $grid. Svelte 5 может компилировать этот сложившийся синтаксис компонентов; точка входа использует актуальную функцию mount. Пользовательская библиотека значков и пакет таблиц стилей не нужны: весь визуальный слой описан выше.
В стандартной настройке Vite и Svelte ниже зафиксированы версии @melt-ui/svelte 0.86.6 и Svelte 5.57.1. Препроцессор Melt не устанавливается, поскольку компонент использует явный эквивалентный синтаксис. При переходе на более новый пакет runes перепишите API намеренно, а не просто измените версию зависимости.
Полная композиция конструкторов на основе хранилищ и действий
createRadioGroup, createSlider и createSwitch добавляют нативную семантику и поведение обычной разметке.
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>
Все визуальные токены созданы специально и не являются официальными настройками Melt по умолчанию.
Позиции бегунка и заполненной части ползунка задаются нативными атрибутами конструктора.
Видимость декоративной сетки не зависит от интервала.
04
Melt UI Настройка агента дизайн-системы
Отправная точка для реализации
Проверенные конструкторы на основе хранилищ и действий API из @melt-ui/svelte 0.86.6 в Svelte 5.57.1. Явный синтаксис конструктора позволяет обойтись без необязательного препроцессора Melt. Это не отдельный пакет runes 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
Запрос для вашего проекта
Промпт для AI-агента
Используйте конструкторы на основе хранилищ и действий из @melt-ui/svelte 0.86.6 с Svelte 5 для исследования типографической композиции. Добавьте и атрибуты, и действия к элементам createRadioGroup, createSlider и createSwitch; используйте предложенный явный синтаксис без неуказанного препроцессора. Сохраняйте массив из одного элемента для значения ползунка и контракт elements.thumbs, значения выравнивания и видимость сетки. Привязывайте вычисленные стили плаката непосредственно к этим хранилищам, сбрасывайте сохранённый результат после изменений и возвращайте исходные значения: left, [2] и true. Не смешивайте это с более новыми runes API или моделью записи на приём.
05
Melt UI Источники и область применения дизайн-системы
Конструкторы на основе хранилищ и действий из @melt-ui/svelte 0.86.6 с Svelte 5.57.1. Все визуальные токены и содержимое плаката созданы специально. Сохранение записывает только локальное состояние предпросмотра и не экспортирует и не публикует дизайн.
