# Melt UI Tasarım Sistemi

## Melt UI Tasarım Sistemi Arayüz Önizlemesi

Hizalamayı değiştirin, harf aralığı slider’ını hareket ettirin ve ızgarayı açıp kapatın; özgün poster, oluşturucu store’ları üzerinden güncellenir.

## 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.

### Özgün anlamsal görsel yapılandırma

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --study-canvas | #f3f0e9 | Dış sayfa. |
| --study-surface | #fffdf8 | Denetim paneli. |
| --study-ink | #32352e | Ana metin. |
| --study-muted | #77796a | Yardımcı metin. |
| --study-line | #dbdece | İz ve panel sınırları. |
| --study-action | #486348 | Seçili radyo düğmesi ve etkin aralık. |
| --study-on-action | #fff | Eylem üzerindeki metin. |
| --study-focus | #8aa77c | Klavye odak halkası. |
| --study-poster | #e0e8bb | Özgün poster kâğıdı. |
| --study-accent | #d68f57 | Dekoratif yörünge şekli. |
### Özgün aralık ve tipografi ölçekleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --study-space-1 | 4px | Adlandırılmış uygulama aralıkları; Melt varsayılanı değildir. |
| --study-space-2 | 8px | Adlandırılmış uygulama aralıkları; Melt varsayılanı değildir. |
| --study-space-3 | 12px | Adlandırılmış uygulama aralıkları; Melt varsayılanı değildir. |
| --study-space-4 | 16px | Adlandırılmış uygulama aralıkları; Melt varsayılanı değildir. |
| --study-space-6 | 24px | Adlandırılmış uygulama aralıkları; Melt varsayılanı değildir. |
| --study-space-8 | 32px | Adlandırılmış uygulama aralıkları; Melt varsayılanı değildir. |
| Text family | system-ui, sans-serif | Uzak yazı tipi bağımlılığı yoktur. |
| Page title | 34px / 1.15; 29px narrow | Özgün başlık hiyerarşisi. |
| Poster title | clamp(28px,5.5vw,64px); 28px below 360px | Özgün duyarlı ekran ölçeği. |
| Poster tracking | 0–8px, step 1; default 2px | Slider tarafından gerçekten ayarlanan harf aralığı. |
| Grid spacing | 24px × 24px | Yerel switch ile açılıp kapatılan dekoratif kılavuzlar. |
| Focus ring | 3px solid #8aa77c; 4px offset | Açıkça tanımlanmış focus-visible görünümü. |
### Yerel oluşturucu sözleşmeleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| createRadioGroup.defaultValue | left | Tek bir hizalama seçili. |
| Radio orientation / loop | horizontal / true | Oklarla gezinme yatay grupta ilerler ve başa döner. |
| createSlider.defaultValue | [2] | Store, tek bir tutamaç için bile bir dizi tutar. |
| Slider min / max / step | 0 / 8 / 1 | Sınırlandırılmış tamsayı takibi. |
| Slider elements.thumbs | Array-producing builder store | 0.86.6, tek bir tutamaç öğesi değil, tutamaçları döndürür. |
| createSwitch.defaultChecked | true | Kılavuzlar görünür başlar. |
| Builder attributes + action | {...$builder} use:builder | Açık sözdizimi, isteğe bağlı Melt önişlemcisi olmadan çalışır. |
| Thumb attributes + action | {...thumb} use:thumb.action | Oluşturulan her tutamaç kendi özniteliklerini/action’ını taşır. |
## Melt UI Tasarım Sistemi Eksiksiz Kılavuz

Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz.

Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları.

## 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.

Destekleyici belirtimi okuyun

## 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.

Destekleyici belirtimi okuyun

## 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.

Destekleyici belirtimi okuyun

## 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.

1. Center’ı seçin ve posterin hizalamasını inceleyin.

2. Letter spacing slider’ına odaklanın ve 8px değerine ulaşmak için End tuşuna basın.

3. Düzen ızgarasını kapatın ve ortaya çıkan yerel kompozisyonu kaydedin.

Destekleyici belirtimi okuyun

## 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.

Destekleyici belirtimi okuyun

## 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.

Destekleyici belirtimi okuyun

## Melt UI Tasarım Sistemi: Denetim Durumunu Yinelemeden Yazılabilir Store’ları Eşgüdümleyin

### Denetim Durumunu Yinelemeden Yazılabilir Store’ları Eşgüdümleyin

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.

Destekleyici belirtimi okuyun

## 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.

Destekleyici belirtimi okuyun

## 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.

Destekleyici belirtimi okuyun

## Melt UI Tasarım Sistemi Bileşen Örnekleri

### Store/eylem oluşturucularının eksiksiz bileşimi

createRadioGroup, createSlider ve createSwitch, sıradan işaretlemeye yerel anlambilim ve davranış ekler.

```
<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>
```

Kod referansı

- Kaydırıcı değeri bir dizidir; poster ilk öğeyi okur.

- Kod, belirtilmemiş bir ön işlemciye ihtiyaç duymamak için açık öznitelik yayılımlarını ve eylemleri kullanır.

- Oluşturucu store'larından herhangi biri değiştiğinde kayıtlı durum geçerliliğini yitirir.

### Özgün poster ve denetimlerin eksiksiz stilleri

Anlamsal CSS değişkenleri, denetim data-state seçicileri, odak halkaları ve duyarlı tipografik poster.

```
:root{--study-canvas:#f3f0e9;--study-surface:#fffdf8;--study-ink:#32352e;--study-muted:#77796a;--study-line:#dbdece;--study-action:#486348;--study-on-action:#fff;--study-focus:#8aa77c;--study-poster:#e0e8bb;--study-accent:#d68f57;--study-space-1:4px;--study-space-2:8px;--study-space-3:12px;--study-space-4:16px;--study-space-6:24px;--study-space-8:32px}html,body,#app{height:auto;min-height:0;margin:0}*{box-sizing:border-box}body{background:var(--study-canvas);color:var(--study-ink);font-family:system-ui,sans-serif}button{font:inherit;cursor:pointer}button:focus-visible,[role=slider]:focus-visible{outline:3px solid var(--study-focus);outline-offset:4px}button:disabled{opacity:.45;cursor:default}.poster-shell{max-width:1060px;margin:auto;padding:32px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--study-muted)}h1{font-size:34px;line-height:1.15;max-width:650px;margin:12px 0}header>p:last-child{font-size:14px;line-height:1.7;color:var(--study-muted);max-width:620px}.poster-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;margin-top:28px}.controls{padding:24px;background:var(--study-surface);border:1px solid var(--study-line);border-radius:14px;align-self:start;min-width:0}.controls h2{font-size:20px;margin:0 0 24px}.control-label{font-size:12px;font-weight:600;margin:0 0 12px}.control-label strong{float:right;color:var(--study-action)}.alignment{display:flex;border:1px solid var(--study-line);padding:4px;border-radius:8px;gap:4px}.align-option{border:0;flex:1;padding:9px 4px;border-radius:5px;font-size:12px;background:transparent;color:var(--study-muted)}.align-option[data-state=checked]{background:var(--study-action);color:var(--study-on-action)}.tracking-control{margin-top:26px}.slider{position:relative;height:24px;display:flex;align-items:center;touch-action:none}.slider:before{content:'';height:4px;background:var(--study-line);position:absolute;inset:10px 0;border-radius:4px}.slider-range{height:4px;position:absolute;background:var(--study-action);border-radius:4px}.slider-thumb{height:20px;width:20px;border:2px solid var(--study-action);background:white;border-radius:50%;cursor:grab}.scale{display:flex;justify-content:space-between;font-size:10px;color:var(--study-muted);margin-top:8px}.grid-control{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--study-line);padding-top:22px;margin-top:24px;font-size:13px}.switch{width:42px;height:24px;padding:3px;border:0;border-radius:999px;background:#b7beaf;flex-shrink:0}.switch span{display:block;width:18px;height:18px;border-radius:50%;background:white;transition:transform .15s}.switch[data-state=checked]{background:var(--study-action)}.switch[data-state=checked] span{transform:translateX(18px)}.hint{font-size:11px;line-height:1.7;color:var(--study-muted);margin:12px 0 24px}.primary{display:block;width:100%;padding:12px;border:0;border-radius:7px;background:var(--study-action);color:white;font-size:13px;font-weight:600}.reset{width:100%;padding:12px 0;border:0;background:transparent;color:var(--study-muted);font-size:11px}.result{font-size:11px;line-height:1.7;color:var(--study-muted);margin:8px 0 0}.poster{background:var(--study-poster);padding:28px;border-radius:14px;min-width:0;overflow:hidden;position:relative}.poster.guides{background-image:linear-gradient(#6680561c 1px,transparent 1px),linear-gradient(90deg,#6680561c 1px,transparent 1px);background-size:24px 24px}.poster-top{display:flex;justify-content:space-between;gap:12px;font-size:9px;font-weight:700;letter-spacing:.1em;position:relative;z-index:1}.poster-orbit{height:130px;position:relative;margin:10px 0 20px}.poster-orbit i{display:block;position:absolute;width:140px;height:140px;background:var(--study-accent);border-radius:50%;right:10%;top:0}.poster-orbit b{display:block;position:absolute;width:140px;height:140px;border:2px solid #617748;border-radius:50%;right:27%;top:0}.poster-title{font-size:clamp(28px,5.5vw,64px);line-height:1.08;font-weight:800;position:relative}.poster-title span{display:block}.poster-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid #9fac7c;margin-top:26px;padding-top:18px;font-size:11px;line-height:1.7}.poster-bottom p{margin:0}.poster-bottom>span{font-size:9px;color:#627046}@media(max-width:740px){.poster-layout{grid-template-columns:minmax(0,1fr)}.poster-shell{padding:20px}h1{font-size:29px}.poster-title{font-size:clamp(30px,9vw,56px)}}@media(max-width:360px){.poster-shell{padding:14px}.controls,.poster{padding:16px}.poster-title{font-size:28px}.poster-orbit{height:110px}.poster-orbit i,.poster-orbit b{width:115px;height:115px}.poster-top{font-size:8px}}@media(prefers-reduced-motion:reduce){.switch span{transition:none}}
```

Kod referansı

- 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.

## 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.

```
// npm create vite@latest melt-type-study -- --template svelte
// cd melt-type-study && npm install
// npm install svelte@5.57.1 @melt-ui/svelte@0.86.6
// 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

```
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.
```

## 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.

- Kullanım Oluşturucu öznitelikleri, eylemleri ve durum store'ları.

- Ön işlemci Neden kullanılır: Melt ön işlem gerektirir ve açık bir eşdeğeri vardır.

- Radyo grubu Tek seçim ve klavye gezintisi.

- Slider Dizi değerleri, sınırlar, yön ve tuşlar.

- Switch Boole durumu ve anlambilimi.

- Denetimli durum Yazılabilir store'lar ve değiştirme işlevleri.

- Kurulum Sürümlenmiş paket kurulumu.

## Melt UI Tasarım Sistemi İlgili Kaynaklar

### Naive UI

Doğrulanmış tema nesnesi değerleri, satır seçimi, genişletme, sıralama, sayfalama ve yerel bir toplu inceleme işlemi içeren yerel bir Naive UI veri tablosu çalışma alanı.

### Nuxt UI

Gerçek Vue bileşenleri, anlamsal tema referansları, girdi doğrulaması ve açık yerel taslak davranışıyla eksiksiz bir Nuxt UI 4.11.3 brief oluşturucusu geliştirin.

### Oruga UI

Aranabilir ve kaldırılabilir konu etiketleri, zorunlu sözlük sınırları, isteğe bağlı bir temanın gerçek belirteçleri ve seçilen etiketleri yansıtan canlı bir kart içeren yerel bir Oruga katalog düzenleyicisi.


- [Uygulama başvurusu](https://www.melt-ui.com/docs/builders/slider)
- [Kaynak](https://www.melt-ui.com/docs/usage)
- [Kaynak](https://www.melt-ui.com/docs/builders/slider)
- [Destekleyici belirtimi okuyun](https://www.melt-ui.com/docs/usage)
- [Destekleyici belirtimi okuyun](https://www.melt-ui.com/docs/preprocessor)
- [Destekleyici belirtimi okuyun](https://www.melt-ui.com/docs/builders/radio-group)
- [Destekleyici belirtimi okuyun](https://www.melt-ui.com/docs/builders/slider)
- [Destekleyici belirtimi okuyun](https://www.melt-ui.com/docs/builders/switch)
- [Destekleyici belirtimi okuyun](https://www.melt-ui.com/docs/controlled)
- [Destekleyici belirtimi okuyun](https://www.melt-ui.com/docs/installation)
- [Kod referansı](https://www.melt-ui.com/docs/usage)
- [Kullanım Oluşturucu öznitelikleri, eylemleri ve durum store'ları.](https://www.melt-ui.com/docs/usage)
- [Ön işlemci Neden kullanılır: Melt ön işlem gerektirir ve açık bir eşdeğeri vardır.](https://www.melt-ui.com/docs/preprocessor)
- [Radyo grubu Tek seçim ve klavye gezintisi.](https://www.melt-ui.com/docs/builders/radio-group)
- [Slider Dizi değerleri, sınırlar, yön ve tuşlar.](https://www.melt-ui.com/docs/builders/slider)
- [Switch Boole durumu ve anlambilimi.](https://www.melt-ui.com/docs/builders/switch)
- [Denetimli durum Yazılabilir store'lar ve değiştirme işlevleri.](https://www.melt-ui.com/docs/controlled)
- [Kurulum Sürümlenmiş paket kurulumu.](https://www.melt-ui.com/docs/installation)