Kobalte, Solid için başsız bileşenler sunar; bunlara ham ve biçimlendirilmiş değerleri ayrı tutan sayısal alanlar, bileşik onay kutusu anatomisi ve basılı durum düğmeleri dahildir. Bu kılavuz, türetilmiş miktarlar ve sıfırlanabilir malzeme kontrolleri içeren bir tarif ölçekleyiciyle bu yapı taşlarını Solid sinyallerine bağlar.
Solid 1.9.15 ile Kobalte 0.13.14; yerel başsız temel bileşenler ve CSS'nin eksiksiz özgün yapılandırması. · Uygulama başvurusu
02
Kobalte Tasarım Sistemi Tasarım Başvurusu
Kobalte 0.13.14, başsız Solid temel bileşenleri sunar; standart bir görsel ölçek sunmaz. Aşağıdaki her recipe-* rengi ve boyutu, özgün uygulamanın eksiksiz yapılandırmasının parçasıdır. API adları ve durum nitelikleri, kurulu paket ve resmî bileşen belgeleriyle doğrulanmıştır.
Kobalte Tasarım Sistemi Kobalte Bileşenlerini Solid Signals ile Bağlayın
Kobalte Bileşenlerini Solid Signals ile Bağlayın
Bileşen; porsiyonlar, toplanan malzemeler ve sabitleme için Solid signal'larını kullanır. createMemo, sayısal signal'dan geçerlilik türetir; For ise kararlı bir malzeme koleksiyonu oluşturur. Kobalte'ın denetimli propları bu signal'ları doğrudan okur; güncellemeler için ayrı bir form sağlayıcısı veya React benzeri bir durum adaptörü gerekmez.
NumberField, Checkbox ve ToggleButton bileşenleri kendi bileşen giriş noktalarından içe aktarılır. Her birinin görevi farklıdır: sayısal alan, düzenlenebilir sayısal girişi işler; her onay kutusu toplanan bir malzemeyi temsil eder; toggle ise tarifin sabitlemesini tutar. Aritmetik ve geçersiz kılma kuralları, görsel seçicilere gömülmek yerine uygulama işlevlerinde kalır.
Kobalte Tasarım Sistemi Sayısal Durumu Biçimlendirilmiş Metinden Ayrı Tutun
Sayısal Durumu Biçimlendirilmiş Metinden Ayrı Tutun
NumberField, rawValue={portions()} ve onRawValueChange={update} değerlerini alır. Sayısal signal çarpımı doğrudan belirlerken giriş alanı biçimlendirmeyi ve kullanıcı düzenlemelerini yönetir. Biçimlendirilmiş gösterim metnini yeniden aritmetiğe vermek; ayraçlar veya yerel ayarlar hakkında, yerel temel bileşenin zaten ele aldığı varsayımları ayrıştırma sürecine taşır.
Örnek, bir ile sekiz arasında tam sayı porsiyonlara izin verir; adım değeri birdir ve maximumFractionDigits sıfır olarak ayarlanmıştır. Düzenlenebilir bir alan geçici olarak eksik veya geçersiz bir değer içerebileceğinden, ayrı bir hesaplanan koşul sonlu olma, tam sayı olma ve sınırlar içinde bulunma durumlarını yine de denetler. Değer geçersizken toplamlar uzun çizgi olarak gösterilir ve malzeme onay kutuları devre dışı bırakılır. Arayüz, kullanıcı geçerli bir girdi vermiş gibi görünen ama aslında yanlış olan bir miktar sunmaz.
Kobalte Tasarım Sistemi Alanı Yerel Etiketi ve Mesajlarıyla Birleştirin
Alanı Yerel Etiketi ve Mesajlarıyla Birleştirin
Sayısal alan; Label, DecrementTrigger, Input, IncrementTrigger, Description ve ErrorMessage bileşenlerini içerir. Görünür açıklama hem aralığı hem de porsiyon değişikliğinin sonucunu belirtir. Tetikleyiciler, Daha az porsiyon ve Daha fazla porsiyon gibi anlamlı etiketlere sahiptir; böylece sembolik eksi ve artı işaretlerinin erişilebilir adı tek başına karşılaması gerekmez.
validationState, uygulama koşuluna göre geçerli ve geçersiz arasında geçiş yapar. ErrorMessage, sayfanın başka bir yerine yerleştirilmiş ilgisiz bir paragraf değil, yerel alanın parçasıdır. Gönderilen bir form için Kobalte ham değerlerin serileştirilmesini sağlayan bir HiddenInput da sunar; bu yerel örnekte gönderim uç noktası veya form yükü bulunmadığından HiddenInput yer almaz.
Kobalte Tasarım Sistemi Malzeme Seçimini Değişmez Bir Set'te Tutun
Malzeme Seçimini Değişmez Bir Set'te Tutun
Her malzeme, Checkbox yapısının tüm bileşenlerini kullanır: Input, Control, Indicator ve Label. Gerçek giriş, anlamsal özellikleri ve klavye etkileşimini korurken görünür denetim alanı onay işaretini ve özgün durum stillerini alır. Etiket hem malzemenin adını hem miktarını içerir; böylece toplanan ürünün miktarı da etikete dâhil olur.
mark, bir kimliği eklemeden veya kaldırmadan önce önceki seçimden yeni bir Set oluşturur. Mevcut Set'i tek başına değiştirmek aynı güvenilir signal güncellemesini sağlamaz. Gösterilen sayı Set'in boyutunu okur; her Checkbox ise sabit malzeme kimliğine göre üyeliği denetler. Miktar değiştiğinde tüm seçim temizlenir; çünkü 320 gram toplamak, yeni 400 gram gereksiniminin karşılandığı anlamına gelmez.
Görünür her malzeme adını Checkbox.Label ile ilişkilendirin.
Görünür kare özel olarak stillendirilse bile Checkbox.Input bileşenini koruyun.
Seçimde kararlı kimlikler kullanın ve her güncellemede yeni bir Set oluşturun.
Kobalte Tasarım Sistemi Kalıcı Bir Yerel Seçim İçin Toggle Kullanın
Kalıcı Bir Yerel Seçim İçin Toggle Kullanın
Sabitleme, yalnızca başlığını değiştiren sıradan bir düğme değil; pressed ve onChange özelliklerine sahip bir ToggleButton'dır. Basılı durumu yerel anlamlara ve data-pressed seçicisine yansıtılır. Etiket bir onay işaretiyle birlikte Sabitlendi olarak değişir; yakındaki durum metni ise bunun yalnızca yerel önizlemeyi etkilediğini açıklar.
Sabitleme, malzeme miktarlarını veya seçimi değiştirmez. Porsiyonları değiştirmek malzeme onaylarını temizler, ancak tarifin kimliği değişmediğinden sabitlemeyi korur. Varsayılan tarifi geri yükle işlemi üç model unsurunu birlikte sıfırlar: dört porsiyon, boş bir malzeme Set'i ve basılı olmayan bir sabitleme düğmesi. Bu farklı sıfırlama sınırları, her etkileşimde her şeyi temizlemek yerine durumun anlamını izler.
Kobalte Tasarım Sistemi Başsız Denetimler İçin Yeniden Üretilebilir Bir Görsel Yapılandırma Sağlayın
Başsız Denetimler İçin Yeniden Üretilebilir Bir Görsel Yapılandırma Sağlayın
Tarifin stil sayfası, sayısal girişin düzenleme yüzeyini, adım tetikleyicilerini ve onay kutusunun seçim işlevini birbirinden ayırır. Soluk malzeme metni yalnızca bir onay kutusu işaretlendikten sonra uygulanır; miktarlar okunaklı kalır, böylece kullanıcı toplanan miktarı geçerli porsiyon sayısıyla karşılaştırabilir.
Aralıklar dört, sekiz, on iki, on altı, yirmi dört ve otuz iki piksel olarak belirlenmiştir. Özgün tipografi hiyerarşisinde denetimler için sistem sans-serif yazı tipi, tarif başlığı içinse Georgia kullanılır. Yirmi bir piksellik görsel onay kutusunun yanında, kutuyla ilişkilendirilmiş tam bir etiket bulunur; kullanışlı etkinleştirme alanı etikettir. Bu kesin değerler, okuyucunun ekran görüntüsünden tahmin yürütmeden örneği yeniden oluşturabilmesi için CSS'ın tamamında yer alır.
Kobalte Tasarım Sistemi Bilgileri Gizlemeden Kompozisyonun Daralmasına İzin Verin
Bilgileri Gizlemeden Kompozisyonun Daralmasına İzin Verin
Geniş düzende esnek bir tarif kartı ile 280 piksellik bir porsiyon paneli yan yana gelir. Genişlik 760 piksele düştüğünde tek sütunda üst üste sıralanır. Kart başlığı satırlara bölünebilir, malzeme etiketleri alt satıra geçebilir; miktar ise satıra bölünmeyen kompakt bir değer olarak kalır. En küçük kesme noktasında miktarları gizlemek yerine panel iç boşluğu ve etiket yazı tipi biraz küçültülür.
Salata çizimi özgün CSS içeriğidir ve dekoratif olarak işaretlenmiştir. Tarifin anlamını, çizimden bağımsız olarak tarif adı, porsiyon sayısı ve malzeme miktarları taşır. Çizimi değiştirirken veya kartı daraltırken malzeme etiketlerinin ve miktarlarının tamamını koruyun; bunlar malzeme toplama görevinin asıl girdileridir.
Kobalte Tasarım Sistemi Miktar Değişikliklerini Bağımlı Durum Güncellemesi Olarak Ele Alın
Miktar Değişikliklerini Bağımlı Durum Güncellemesi Olarak Ele Alın
Her porsiyonda beş malzemenin toplamı 250 gram artar. Dört porsiyondan beş porsiyona geçildiğinde görüntülenen toplam 1.000 gramdan 1.250 grama, portakal gereksinimi ise 320 gramdan 400 grama çıkar. Önceden işaretlenen seçimler temizlenir; çünkü eski miktarlara karşılık geliyorlardı. Tarifin kimliği aynı kaldığından tarif sabitlemesi değişmez.
Güncelleme işlevi önce gelen değeri Object.is kullanarak mevcut sinyalle karşılaştırır. Değer değişmediyse geri çağrı kontrol listesini temizlememeli veya miktarın değiştiğini duyurmamalıdır. Geçersiz değerlerde miktarlar gösterilmez ve toplama devre dışı bırakılır; hata mesajı da kabul edilen aralığı açıklar. Bu kurallar, geçersiz bir sayının yanıltıcı bir toplam oluşturmasına izin vermeden ara düzenlemelerin izlenmesini sağlar.
Dört porsiyon için Portakal dilimlerini seçin.
Beş porsiyona çıkarın ve 400 g portakal, toplam 1.250 g ve toplanmış sıfır ürün olduğunu doğrulayın.
Tarifi sabitleyin, ardından varsayılanları geri yükleyip tüm yerel durumun sıfırlandığını doğrulayın.
Kobalte Tasarım Sistemi: Sağlam Bir Yapı Kullanın ve Stil Sayfasının Tamamını Ekleyin
Solid Derlemesini Kullanın ve Stil Sayfasının Tümünü Ekleyin
Kurulumda Vite Solid şablonu kullanılır, doğrulanmış Solid ve Kobalte sürümleri sabitlenir ve uygulama açıkça belirtilen bir kök öğeye bağlanır. Yukarıda gösterilen bileşen ve stil sayfası eksiksiz dosyalardır. Bu örnek için tema sağlayıcısı, simge paketi, harici yazı tipi veya arka uç gerekmez.
Başka bir uygulamayla bütünleştirirken çerçeve derleyicisiyle bileşen üretimini uyumlu tutun. Bir React dönüşümü, Solid JSX'i doğru bir Kobalte uygulamasına dönüştürmez. Benzer şekilde, gelecekteki büyük bir Kobalte API sürümüne geçmeden önce, sabitlenmiş bağımlılığı değiştirmek için o sürümün kendi belgelerine başvurulmalıdır. Tarif miktarları ve palet örnek uygulama verileridir; bunları uyarlamak yerel temel bileşen sözleşmesini değiştirmeyi gerektirmez.
Yerel sayı alanı, onay kutusu anatomisi ve açıkça tanımlanmış geçersiz değer ve sıfırlama davranışına sahip geçiş düğmesi.
jsx
import {createSignal,createMemo,For} from 'solid-js';
import {NumberField} from '@kobalte/core/number-field';
import {Checkbox} from '@kobalte/core/checkbox';
import {ToggleButton} from '@kobalte/core/toggle-button';
export default function App(){
const[portions,setPortions]=createSignal(4),[checked,setChecked]=createSignal(new Set()),[pinned,setPinned]=createSignal(false),[notice,setNotice]=createSignal('');
const ingredients=[{id:'orange',name:'Orange segments',grams:80},{id:'beans',name:'Cooked white beans',grams:90},{id:'leaves',name:'Salad leaves',grams:25},{id:'fennel',name:'Thinly sliced fennel',grams:40},{id:'dressing',name:'Citrus dressing',grams:15}];
const valid=createMemo(()=>Number.isFinite(portions())&&Number.isInteger(portions())&&portions()>=1&&portions()<=8);
function update(value){if(Object.is(value,portions()))return;setPortions(value);setChecked(new Set());setNotice('Portions changed. Ingredient checks were cleared for the new quantities.')}
function mark(id,value){setChecked(previous=>{const next=new Set(previous);value?next.add(id):next.delete(id);return next})}
function reset(){setPortions(4);setChecked(new Set());setPinned(false);setNotice('Restored four portions and an unchecked ingredient list.')}
return <main class="recipe-shell"><header><p class="eyebrow">KITCHEN NOTEBOOK · REACTIVE RECIPE CARD</p><h1>A brighter bowl, sized for your table.</h1><p>Change the portions, check the scaled ingredients and pin the recipe locally. The quantities are original sample data for this interface.</p></header><div class="recipe-layout"><section class="recipe-card"><div class="salad-art" aria-hidden="true"><div class="plate"><i/><b/><em/><span/><strong/></div></div><div class="recipe-heading"><div><p class="eyebrow">CITRUS & WHITE BEAN SALAD</p><h2>Fresh, crisp, generous.</h2></div><ToggleButton class="pin" pressed={pinned()} onChange={value=>{setPinned(value);setNotice(value?'Recipe pinned in this local preview.':'Recipe unpinned in this local preview.')}} aria-label="Pin recipe">{pinned()?'Pinned ✓':'Pin recipe'}</ToggleButton></div><p class="recipe-description">Sweet citrus, tender beans and crisp fennel. Use the checklist to gather the amounts for your chosen portion count.</p><div class="ingredient-title"><h3>Ingredients</h3><span>{checked().size} / 5 gathered</span></div><div class="ingredients"><For each={ingredients}>{ingredient=><Checkbox class="ingredient" checked={checked().has(ingredient.id)} onChange={value=>mark(ingredient.id,value)} disabled={!valid()}><Checkbox.Input/><Checkbox.Control class="check-control"><Checkbox.Indicator>✓</Checkbox.Indicator></Checkbox.Control><Checkbox.Label class="ingredient-label"><span>{ingredient.name}</span><strong>{valid()?ingredient.grams*portions()+' g':'—'}</strong></Checkbox.Label></Checkbox>}</For></div></section><aside class="portion-panel"><h2>Make it yours</h2><NumberField rawValue={portions()} onRawValueChange={update} minValue={1} maxValue={8} step={1} formatOptions={{maximumFractionDigits:0}} validationState={valid()?'valid':'invalid'} class="portion-field"><NumberField.Label class="field-label">Portions</NumberField.Label><div class="stepper"><NumberField.DecrementTrigger aria-label="Fewer portions">−</NumberField.DecrementTrigger><NumberField.Input/><NumberField.IncrementTrigger aria-label="More portions">+</NumberField.IncrementTrigger></div><NumberField.Description class="field-description">Choose 1–8 whole portions. Changing the quantity clears ingredient checks.</NumberField.Description><NumberField.ErrorMessage class="field-error">Enter a whole number from 1 to 8.</NumberField.ErrorMessage></NumberField><div class="portion-total"><span>Total ingredients</span><strong>{valid()?ingredients.reduce((s,x)=>s+x.grams,0)*portions()+' g':'—'}</strong></div><h3>A simple preparation order</h3><ol><li>Gather the scaled amounts and drain the cooked beans.</li><li>Combine the orange, fennel and leaves in a bowl.</li><li>Add the beans and dressing, then toss gently.</li></ol><button class="reset" onClick={reset}>Restore default recipe</button><p role="status" class="notice">{notice()||(pinned()?'Recipe pinned in this local preview.':'No shopping order or account update is created.')}</p></aside></div></main>
}
Bu recipe-* değerleri, resmî Kobalte tasarım belirteçleri değil, uygulamaya özgü tercihlerdir.
Eksiksiz stil sayfasında duyarlı yerleşim ve görünür odak stilleri bulunur.
04
Kobalte Tasarım Sistemi Aracı Kurulumu
Uygulamaya Başlangıç Noktası
Solid Vite şablonu, gereken Solid JSX derleyicisini sağlar. Yukarıdaki App.jsx ve style.css örnekleri uygulama kodunun ve stillerin tamamını içerir; sağlayıcı veya harici hizmet gerekmez.
JavaScript
// npm create vite@latest kobalte-recipe -- --template solid
// cd kobalte-recipe && npm install
// npm install [email protected] @kobalte/[email protected]
// Save the complete examples as src/App.jsx and src/style.css.
// src/index.jsx:
import {render} from 'solid-js/web';
import App from './App.jsx';
import './style.css';
render(() => <App />, document.getElementById('app'));
// index.html: <div id="app"></div><script type="module" src="/src/index.jsx"></script>
// npm run dev
Projeniz İçin Bir İstem
Ajan İstemi
Reaktif tarif kartını yeniden oluşturmak için Solid 1.9.15 ile Kobalte 0.13.14 kullanın. NumberField rawValue/onRawValueChange özelliklerini, bir ile sekiz arasındaki sınırları, tam sayı porsiyon doğrulamasını ve Label/Description/ErrorMessage anatomisinin tamamını koruyun. Malzeme gramlarını ve toplamları porsiyon sinyalinden türetin; miktar gerçekten değiştiğinde, tarife sabitleme durumunu koruyup değiştirilemez işaretli-ID Set'ini temizleyin. Yerel Checkbox parçalarını ve ToggleButton pressed/onChange özelliklerini kullanın; miktar geçersizken ürün toplamayı devre dışı bırakın. Sıfırlama sırasında dört porsiyona dönün, hiçbir ürünü işaretli bırakmayın ve tarifi sabitlemeyin. Özgün tarifin CSS içeriğinin tamamını ekleyin; tüm durum yerel kalır.
05
Kobalte Tasarım Sistemi Kaynakları ve Kapsamı
Kobalte 0.13.14 ve Solid 1.9.15 ile doğrulanmıştır. Tüm recipe-* belirteçleri, CSS illüstrasyonu ve malzeme miktarları özgün örnek verilerdir. Sabitleme ve ürün toplama yerel durumda tutulur; herhangi bir hesaba, alışveriş hizmetine veya kalıcı tarif deposuna bağlanılmaz.
