Melt UI’ın store/action oluşturucuları, sahip olduğunuz Svelte işaretlemesine erişilebilir davranışlar ekler. Bu kılavuz, radyo düğmesi, kaydırıcı ve anahtar oluşturucularını öznitelikleri, eylemleri ve yazılabilir depoları üzerinden birbirine bağlamak için @melt-ui/svelte 0.86.6 kullanır; bu, daha yeni runes API yapısından farklıdır.
Svelte 5.57.1 ile @melt-ui/svelte 0.86.6 oluşturucuları; açıkça belirtilen öznitelikler ve action’lar, Melt önişlemcisi gerekmez. · Uygulama başvurusu
02
Melt UI Tasarım Sistemi Tasarım Referansı
Svelte 5.57.1’de çalışan, doğrulanmış @melt-ui/svelte 0.86.6 store/action oluşturucuları. Bu, belgelenmiş oluşturucu API’dır; yeni nesil runes API ile aynı değildir. Melt başlıksızdır; aşağıdaki tüm --study-* görsel değerleri, eksiksiz biçimde sağlanan özgün uygulama yapılandırmasıdır.
Melt UI Tasarım Sistemi: Melt, Size Ait İşaretlemeye Davranış Ekler
Melt, Size Ait İşaretlemeye Davranış Ekler
Bu örnek, @melt-ui/svelte 0.86.6 paketindeki store/action API’ı kullanır. createRadioGroup, createSlider ve createSwitch, öğe oluşturucuları ve durum store’ları döndürür. Sıradan button, span ve div öğelerine, bunları yerel denetim davranışına bağlayan öznitelikler ve action’lar eklenir.
Paket; yeşil kâğıdı, poster tipografisini veya panel geometrisini sağlamaz. Bu tercihler, özgün stil dosyasının tamamında tanımlanmıştır. Belgeler ayrıca daha yeni, ayrı bir runes API sürümüne de işaret eder; bu sayfa, iki neslin birbiriyle uyumsuz örneklerini karıştırmak yerine doğrulanmış oluşturucu sürümünü özellikle belirtir.
Melt UI Tasarım Sistemi: Öznitelikleri Yayın ve Action’ları Birlikte Yükleyin
Öznitelikleri Yayın ve Action’ları Birlikte Yükleyin
Bir öğe hem oluşturucu özniteliklerine hem de action’ına ihtiyaç duyar. Örnekte {...$alignRoot} use:alignRoot ve {...$alignItem(value)} use:alignItem gibi biçimler kullanılır. Öznitelikler rolleri, durumu ve konumlandırmayı taşır; action ise etkileşim davranışını ve temizleme işlemlerini ekler.
Daha kısa olan use:melt sözdizimi, Melt’in isteğe bağlı önişlemcisini gerektirir. Bu olmadan, çalışma zamanı oluşturucuyu sessizce eklemek yerine belirli bir hata verir. Düzeltilmiş kodda baştan sona açık sözdizimi kullanılır; bu nedenle aşağıdaki Vite kurulumu gizli bir önişlemci bağımlılığını atlamaz. Her slider tutamacı da döndürülen özniteliklerini yayar ve thumb.action’ı çağırır.
Melt UI Tasarım Sistemi: Başlıksız Görsel Sistemi Uygulama CSS’sinde Tanımlayın
Başlıksız Görsel Sistemi Uygulama CSS’sinde Tanımlayın
--study-* rolleri dış tuvali, denetim yüzeyini, metni, ayırıcıyı, eylemi, odağı, poster kâğıdını ve dekoratif vurguyu birbirinden ayırır. Adlandırılmış altı aralık değeri dört pikselden otuz iki piksele kadar uzanır. Bunlar Melt tarafından tutulan bir token kataloğu değil, bu özel kompozisyonu yeniden üretilebilir kılan özgün tercihlerdir.
Seçili radyo düğmeleri ve switch, data-state=checked kullanır; slider’ın döndürdüğü satır içi konumlar ise tutamacın ve seçili aralığın nerede görüneceğini belirler. Stil dosyası yalnızca geometriyi ve renkleri ekler. Bu yerel konumları elle hesaplanan yüzdelerle değiştirmek mantığı yinelemek olur ve yön veya yazım yönü desteğini bozma riski taşır.
Melt UI Tasarım Sistemi: Yerel Grup Gezintisiyle Tek Bir Hizalamayı Seçili Tutun
Yerel Grup Gezintisiyle Tek Bir Hizalamayı Seçili Tutun
createRadioGroup, yatay yönlendirme ve döngü etkin olacak şekilde left değeriyle başlar. Her radyo öğesinin left, center veya right gibi sabit bir değeri vardır. Poster metninin text-align değeri doğrudan seçili değeri okur; böylece klavye gezintisi ve işaretçiyle seçim aynı görünür kompozisyonu etkiler.
Grup, erişilebilir Text alignment etiketini alır. Üç seçenek de sınıfları elle değiştiren sıradan düğmeler değil, yerel oluşturucuyla ilişkilendirilmiş radyo denetimleridir. Seçili durumları hem anlamsal yapıya hem de dolu görünüm için kullanılan data-state seçicisine yansıtılır.
Center’ı seçin ve posterin hizalamasını inceleyin.
Letter spacing slider’ına odaklanın ve 8px değerine ulaşmak için End tuşuna basın.
Düzen ızgarasını kapatın ve ortaya çıkan yerel kompozisyonu kaydedin.
Melt UI Tasarım Sistemi: Tek Tutamaçla Bile Değeri Dizi Olarak Ele Alın
Tek Tutamaçla Bile Değeri Dizi Olarak Ele Alın
Slider, skaler bir değer yerine defaultValue:[2] ile başlar. Yüklenen 0.86.6 oluşturucusu, dizi üreten bir store olan elements.thumbs değerini sunar ve şablon döndürülen her tutamacı işler. Poster, $tracking[0] değerini okur ve piksel cinsinden harf aralığı olarak uygular.
Sınırlar sıfır ile sekiz, adım ise birdir. Home ve End sınır değerlere ulaşır; ok tuşları tanımlı adım kadar ilerler. Tek tutamaçlı bu kompozisyonda $tracking[0] değerini okuyun; ikinci bir tutamaç eklerken, ilgisiz ikinci bir skaler durum oluşturmak yerine dizi modelini koruyun.
Melt UI Tasarım Sistemi: Görsel Kılavuzu Tasarım Değerlerinden Ayrı Tutun
Görsel Kılavuzu Tasarım Değerlerinden Ayrı Tutun
createSwitch, işaretli durumda başlar ve durumu posterdeki guides sınıfını denetler. Bu sınıf, yirmi dört piksellik aralıklarla tekrarlanan iki ince ızgara gradyanı çizer. Kapatıldığında gradyanlar kalkar; hizalama ve harf aralığı değişmez.
Görünür Show layout grid etiketi, switch’in sabit kimliğiyle ilişkilendirilir. Tutamacın hareketi bir CSS geçişidir ve azaltılmış hareket için bir geçersiz kılma kuralı vardır. Dekoratif yörünge çizimi aria-hidden olarak işaretlenmiştir ve etkileşimi yoktur; gerçek denetimlerin anlamsal yapısıyla rekabet etmez.
Hizalama, takip ve ızgara görünürlüğü oluşturucuların yazılabilir store’larında kalır. Oluşturulan poster bu store’ları doğrudan okur: text-align hizalamayı, letter-spacing ilk slider değerini kullanır; bir CSS sınıfı ise switch’in işaretli değerini kullanır. Aynı üç ayar için ayrı bir uygulama modeli oluşturmak gereksiz eşitleme işi doğurur.
Kaydedilen anlık görüntü, bu değerlerin imzasından türetilir. Her değişiklik onayı temizler; sıfırlama ise store’lara sırasıyla left, [2] ve true değerlerini yazar. Görünürde yalnızca tek bir tutamaç olsa da tek elemanlı dizi önemlidir: skaler 2 atamak, slider’ın değer sözleşmesine uymaz.
Melt UI Tasarım Sistemi: Her Oluşturucuya Özniteliklerini, Action’ını ve Adını Verin
Her Oluşturucuya Özniteliklerini, Action’ını ve Adını Verin
Radyo grubu Text alignment etiketini alır, slider tutamacı görünür Letter spacing metnine bağlanır ve switch görünür etiketiyle ilişkilendirilir. Bu adlar, çevredeki dekoratif sarmalayıcılara değil, oluşturucuyla ilişkilendirilmiş gerçek öğelere verilmelidir.
Açık şablon sözdizimi, öznitelikleri ve eylemleri birlikte ekler. Kaydırıcı tutamakları için döndürülen öğe kendi eylemini içerir; bu nedenle döngüde tutamak özniteliklerini yayıp thumb.action çağrılır. İz ve aralığı biçimlendirirken oluşturucunun konumlandırma çıktısını koruyun; bu çıktı gerçek sayısal durumu ve yönü belirtirken stil sayfası renk ve geometriden sorumludur.
Yalnızca sayısal etiketi değil, gerçek hesaplanmış çıktıyı da denetleyin.
Etiketleri yerel oluşturucu öğelerinde tutun.
Özel görsel geçişlerde azaltılmış hareket tercihine uyun.
Melt UI Tasarım Sisteminde Normal bir Svelte Projesinde Doğrulanmış Oluşturucuyu Kullanın API
Doğrulanmış Oluşturucu API’ı Standart Bir Svelte Projesinde Kullanın
Eksiksiz bileşen, $alignment, $tracking ve $grid ile Svelte store aboneliklerini kullanır. Svelte 5, bu yerleşik bileşen sözdizimini derleyebilir; giriş noktası güncel mount işlevini kullanır. Görsel katmanın tamamı yukarıda sağlandığından özel bir simge kitaplığına veya stil sayfası paketine gerek yoktur.
Aşağıdaki standart Vite Svelte kurulumu, @melt-ui/svelte 0.86.6 ve Svelte 5.57.1 sürümlerini sabitler. Bileşen zaten açık eşdeğer sözdizimini kullandığından Melt ön işlemcisini yüklemez. Daha yeni runes paketine geçerken yalnızca bağımlılık sürümünü değiştirmek yerine API öğesini bilinçli olarak yeniden yazın.
createRadioGroup, createSlider ve createSwitch, sıradan işaretlemeye yerel anlambilim ve davranış ekler.
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>
Tüm görsel belirteçler özgündür; Melt'in resmî varsayılanları değildir.
Kaydırıcı tutamağı/aralığı konumları yerel oluşturucu özniteliklerinden gelir.
Dekoratif ızgaranın görünürlüğü, aralık ayarından bağımsızdır.
04
Melt UI Tasarım Sistemi Ajan Kurulumu
Uygulamaya Başlangıç Noktası
Svelte 5.57.1'de @melt-ui/svelte 0.86.6 ile doğrulanmış store/eylem API. Açık oluşturucu sözdizimi, isteğe bağlı Melt ön işlemcisini gerektirmez. Bu, yeni nesil runes için ayrı API değildir.
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
Projeniz İçin Bir İstem
Ajan İstemi
Tipografik kompozisyon çalışması için Svelte 5 ile @melt-ui/svelte 0.86.6 store/eylem oluşturucularını kullanın. Hem öznitelikleri hem de eylemleri createRadioGroup, createSlider ve createSwitch öğelerine ekleyin; belirtilmemiş bir ön işlemci gerektirmek yerine sağlanan açık sözdizimini kullanın. Kaydırıcının tek öğeli dizi ve elements.thumbs sözleşmesini, hizalama değerlerini ve ızgara görünürlüğünü koruyun. Posterın hesaplanmış stillerini doğrudan bu store'lara bağlayın, değişikliklerden sonra kayıtlı geri bildirimi geçersiz kılın ve değerleri left, [2] ve true olarak sıfırlayın. Daha yeni runes API öğesini veya bir randevu modelini karıştırmayın.
05
Melt UI Tasarım Sistemi Kaynakları ve Kapsamı
Svelte 5.57.1 ile @melt-ui/svelte 0.86.6 store/eylem oluşturucuları. Tüm görsel belirteçler ve poster içeriği özgündür. Kaydetme işlemi yalnızca yerel önizleme durumunu kaydeder; tasarımı dışa aktarmaz veya yayımlamaz.
