Kapsamı belirlenmiş köşe yarıçapı ve boşluk değişiklikleri, shadow DOM stillendirmesi, seçim davranışı ve girdi doğrulaması dahil olmak üzere yerel özel öğelerde Web Awesome’ın gerçek anlamsal belirteçlerini inceleyin.
Web Awesome Tasarım Sistemi: Kendi Bileşen Sınırına Sahip Özel Öğeler
Kendi Bileşen Sınırına Sahip Özel Öğeler
Web Awesome, React uygulaması gerektirmek yerine kayıtlı HTML özel öğeleri sağlar. wa-input veya wa-select içe aktarıldıktan sonra sıradan HTML içine yerleştirilebilir ve belgelenmiş özellikleri ile olayları üzerinden denetlenebilir. Bu çalışma alanı 3.14.0 sürümünü paketler ve yalnızca herkese açık pakette bulunan bileşenleri kullanır.
Görünür denetimler, gölge kökü uygulamaları da dâhil olmak üzere gerçek özel öğelerdir. Çevresindeki üstbilgi, bölümler ve gösterim ise özgün HTML içeriğidir. Böylece örnek, hangi biçimlendirme kararlarının devralınan özel özellikler aracılığıyla bileşen sınırını geçtiğini, hangilerinin sayfa düzenine ait olduğunu gözlemlemeye yardımcı olur.
Web Awesome Tasarım Sistemi: Anlamsal Renk Takma Adlarını Koruyun
Anlamsal Renk Takma Adlarını Koruyun
Varsayılan tema; yükseltilmiş, varsayılan ve alçaltılmış yüzeyleri, normal ve kısıtlanmış metinleri ve birden fazla marka dolgusu/metin rengi çiftini birbirinden ayırır. Belirteç gösteriminde alçaltılmış yüzey, ana örnekte varsayılan yüzey kullanılır; küçük rozet ise brand-fill-quiet ile brand-on-quiet değerlerini eşleştirir. Görünüm değiştiğinde de bu roller anlamını korur.
Başvuru, her rolü tahminî bir onaltılık değere dönüştürmek yerine var(--wa-color-neutral-10) gibi takma adları korur. Anlamsal atama geçerliliğini korurken palet değişebilir. Güçlü bir marka eylemini özelleştiriyorsanız hem dolgu rengini hem de bu rengin üzerinde kullanılan metin rengini göz önünde bulundurun. Bunlardan birini eşini değiştirmeden güncellemek, düğme metninin okunmasını zorlaştırabilir.
Web Awesome Tasarım Sistemi: Her Bileşeni Yeniden Yazmadan Ölçeği Değiştirin
Her Bileşeni Yeniden Yazmadan Ölçeği Değiştirin
Köşe yarıçapı seçicisi, yalnızca örnekte --wa-border-radius-scale değerini değiştirir. Ölçek bir olduğunda varsayılan küçük/orta/büyük köşe yarıçapları, kök boyut 16 pikselken sırasıyla üç, altı ve on iki piksele karşılık gelir. Ölçeği sıfıra ayarlamak ölçeklenebilir köşeleri kare yapar; ölçek iki olduğunda değerleri iki katına çıkar. Hap ve daire belirteçleri ayrı kavramlardır; bu çarpanı izledikleri varsayılmamalıdır.
Boşluk seçicisi, --wa-space-scale değerini değiştirir. Örnekteki iç boşluk, aralıklar ve gösterim boşluğu resmî boşluk belirteçlerini kullandığından aralarındaki ilişkiler birlikte değişir. Bu, her bileşenin her boyutunun ölçekleneceği anlamına gelmez: bileşen denetimlerinin boyutlandırılması kendine özgü belirteç ilişkilerine sahiptir. Düzenleme paneli bu kapsamın dışındadır; böylece örnek değişirken karşılaştırma sabit kalır.
Kare'yi seçin ve girdi, kapsayıcı ve gösterim köşelerini inceleyin.
Rahat boşluk'u seçin ve örnekteki aralıkları değişmeden kalan düzenleme paneliyle karşılaştırın.
Her iki çarpanı ve görünümü birlikte sıfırlamak için Varsayılanları geri yükle'yi seçin.
Web Awesome Tasarım Sistemi: Tipografi Belirteçleri ve Özgün Başlık Tercihleri
Tipografi Belirteçleri ve Özgün Başlık Tercihleri
Varsayılan metin ailesi ui-sans-serif, system-ui, sans-serif’tir. Başlık ailesi, metin ailesini kullanır; kodda ise ui-monospace kullanılır. Normal satır yüksekliği belirteci 1.6, sıkıştırılmış satır yüksekliği ise 1.2’dir. Orta boyutlu yazı belirteci, font-size-scale ile çarpılan bir rem değeridir; daha büyük boyutlar yuvarlanmış hesaplamalar kullanır. Tablo, bu ifadeleri bağımlılıklarını gizlemeden gösterir.
Çalışma tezgâhının kendisi 34px başlık ve 23px bölüm başlığı kullanır; yerel 700px kesme noktasında sayfa başlığını küçültür. Bunlar özellikle bu sayfaya özgü kurallardır. Yerel alanlar, kitaplığın etiket ve ipucu stillerini koruyarak kullanıcının özel sayfa hiyerarşisini varsayılan bileşen tipografisiyle karşılaştırmasına olanak tanır.
Web Awesome Tasarım Sistemi İlk Değerleri, Özellikler ve Değişiklik Olayları
Başlangıç Değerleri, Özellikler ve Değişiklik Olayları
Her select öğesi, kararlı değerlere sahip wa-option alt öğeleri içerir. Varsayılan seçeneklerde, başlangıç seçimi için bileşenin güncel yönergelerine uygun olarak selected kullanılır. Çalışma zamanındaki değişikliklerde select value özelliği okunur. Tema denetimleri change olaylarını dinleyerek CSS özel özelliklerini günceller; işlenmiş seçenek etiketlerindeki metni ayrıştırmaz.
Bölge seçimi, sıradan bir örnek alanıdır ve harici bir depolama hizmetini kontrol etmez. Seçilen değer, yerel işlem mesajında bildirilir. Arayüz, Avrupa’yı seçmenin depolama alanı tahsis ettiği izlenimini yaratmaz. Gerçekçi görünen bir bileşen demosunda ürün terminolojisi kullanıldığında bu ayrım önemlidir.
Web Awesome Tasarım Sistemini Belirteçler ve Belgelenmiş Parçalarla Biçimlendirme
Belirteçlerle ve Belgelenmiş Bölümlerle Biçimlendirin
Sıradan alt öğe seçicileri, bir bileşenin gölge ağacının içine doğrudan erişemez. Bu örnek, alan arka planının, metninin ve köşe yarıçapının çevresindeki HTML ile uyumlu kalması için devralınan tema değişkenlerini kullanır. Bu, dahili olarak oluşturulan işaretlemeyi hedeflemeye çalışmak yerine desteklenen bir biçimlendirme yüzeyinden yararlanır.
Bileşene özgü değişiklikler için o bileşenin belgelenmiş CSS özel özelliklerine ve CSS parçalarına başvurun. Genel bir input seçicisi, wa-input içindeki dahili input öğesini değiştirmeyebilir. Buna karşılık, bir tema sınıfını veya değişkenini ortak bir üst öğeye eklemek, alt öğelerdeki birçok özel öğeyi bilinçli olarak etkileyebilir; bu nedenle kapsam dikkatle seçilmelidir.
Web Awesome Tasarım Sistemi Yükseltme, Doğrulama ve Yerel Sonuçlar
Yükseltme, Doğrulama ve Yerel Sonuçlar
Bileşen kaydı, sayfa açısından eşzamansız gerçekleşir. Örnek, kullandığı API’ler için customElements.whenDefined öğesini bekler, ardından başlangıç değerlerini okumadan önce select güncellemelerinin tamamlanmasını bekler. Böylece varsayılanlar, bilinmeyen bir HTML etiketinden henüz bileşen sınıfına yükseltilmemiş bir öğeye uygulanmaz.
Çalışma alanı işlemi, wa-input üzerinde setCustomValidity ve reportValidity kullanır. Baştaki ve sondaki boşlukları temizlenmiş ad iki karakterden kısaysa reddedilir; input olayı, düzeltmenin yeniden denenebilmesi için özel hatayı temizler. Devre dışı Invite later düğmesi, yerel bileşenin devre dışı durumudur. Durum metni yalnızca yerel olarak uygulanan adı bildirir; kodun tamamında çalışma alanı oluşturma veya depolama tahsisi isteği yoktur.
Web Awesome Tasarım Sistemi Temasını ve Kullandığınız Bileşenleri İçe Aktarın
Temayı ve Kullandığınız Bileşenleri İçe Aktarın
Vite vanilla uygulamasına @awesome.me/[email protected] yükleyin ve sağlanan main.js dosyasını giriş noktası olarak kullanın. Varsayılan tema stil sayfası gereklidir. Sayfa düzeni açıkça CSS olarak tanımlandığından örnek, daha kapsamlı yerel sıfırlama veya yardımcı program paketini bilerek yüklemez. İçe aktarımlar, işaretlemede kullanılan beş bileşen türünü kaydeder.
npm dist modülleri paketleyiciler için tasarlanmıştır. Bağımlılıkları farklı biçimde paketlendiğinden, doğrudan tarayıcı modülü yüklemesi için alternatif olarak dist-cdn dağıtımını kullanın. Bir dist içe aktarımını düz bir script etiketine kopyalayıp yalın bağımlılıkların çözümleneceğini varsaymayın. Harici varlık gerektiren bileşenler için belgelenen temel yol ayarı gerekir; bu örnekte kullanıcı tarafından sağlanan simge varlıkları kullanılmaz ve paket çevrimdışı çalışacak şekilde oluşturulur.
Web Awesome Tasarım Sistemi Genel Bileşenler ve Temanın Sınırlarını Doğru Tanıtma
Herkese Açık Bileşenler ve Temaların Gerçek Sınırları
Çalışma tezgâhı, varsayılan temayı ve genel bileşenleri gösterir. Bazı Web Awesome bileşenleri, kalıpları ve tasarım kaynakları Pro sürümünde sunulur; bu nedenle sayfa, genel paketi yüklemenin katalogdaki her öğeye erişim sağladığı izlenimini vermez. Bir bileşeni paylaşılan bir tasarım sisteminde zorunlu bağımlılık hâline getirmeden önce kullanılabilirliği kontrol edilmelidir.
Yeniden kullanılabilir bir ürün teması; hangi değişkenlerin değiştirildiğini, kapsamlarının nerede belirlendiğini ve her iki görünüm modunun nasıl denetlendiğini açıklamalıdır. Canlı çalışma tezgâhı bu sürecin küçük bir örneğidir: okuyucu, bağlantısız bir palet görseline güvenmek yerine değiştirilen değişkenleri inceleyebilir ve ortaya çıkan yerel bileşenleri karşılaştırabilir.
Başlangıç seçimleri için wa-option üzerinde selected kullanılır.
Yalnızca ücretsiz bileşenler kullanılır.
Eksiksiz içe aktarımlar ve belirteç denetimleri
Bileşenleri kaydeder, yükseltmeyi bekler, kapsamı belirlenmiş özel özellikleri değiştirir ve yerel doğrulamayı uygular.
JavaScript
import '@awesome.me/webawesome/dist/styles/themes/default.css';
import '@awesome.me/webawesome/dist/components/button/button.js';
import '@awesome.me/webawesome/dist/components/input/input.js';
import '@awesome.me/webawesome/dist/components/select/select.js';
import '@awesome.me/webawesome/dist/components/option/option.js';
import '@awesome.me/webawesome/dist/components/switch/switch.js';
import './style.css';
const $=id=>document.getElementById(id);function update(){const s=$('specimen');s.style.setProperty('--wa-border-radius-scale',$('radius').value);s.style.setProperty('--wa-space-scale',$('spacing').value);s.classList.toggle('wa-dark',$('dark').checked);s.classList.toggle('wa-light',!$('dark').checked);$('values').textContent=`--wa-border-radius-scale: ${$('radius').value};\n--wa-space-scale: ${$('spacing').value};`;}
Promise.all(['wa-select','wa-switch','wa-input','wa-button'].map(x=>customElements.whenDefined(x))).then(async()=>{await Promise.all([...document.querySelectorAll('wa-select')].map(e=>e.updateComplete));for(const id of ['radius','spacing','dark'])$(id).addEventListener('change',update);$('reset').addEventListener('click',()=>{$('radius').value='1';$('spacing').value='1';$('dark').checked=false;update()});$('create').addEventListener('click',()=>{const field=$('workspace');field.setCustomValidity(field.value.trim().length<2?'Use at least two non-space characters.':'');if(!field.reportValidity())return;$('result').textContent=`Applied “${field.value.trim()}” in the ${$('region').value} specimen. No workspace or storage allocation was created.`});$('workspace').addEventListener('input',()=>$('workspace').setCustomValidity(''));update()});
Vite vanilla projesi oluşturun ve yukarıda gösterilen main.js ile style.css dosyalarının tamamını kullanın.
04
Web Awesome Tasarım Sistemi AI Ajanı Kurulumu
Uygulamaya Başlangıç Noktası
Eksiksiz main.js, CSS ve body örnekleri, çalışma tezgâhını bir paketleyiciyle yeniden oluşturur. Çevrimdışı demo, temanın CSS dosyasına satır içi eklendiği bir esbuild paketidir. React sağlayıcısı gerekmez.
JavaScript
// Create a Vite vanilla project, then install:
// npm install @awesome.me/[email protected]
// index.html: paste the complete workbench markup in body,
// then add <script type="module" src="/main.js"></script>.
// main.js: use the complete imports and token-controls example above.
// style.css: use the complete scoped specimen CSS above.
// Minimum registration pattern used by this example:
import '@awesome.me/webawesome/dist/styles/themes/default.css';
import '@awesome.me/webawesome/dist/components/button/button.js';
import '@awesome.me/webawesome/dist/components/input/input.js';
import '@awesome.me/webawesome/dist/components/select/select.js';
import '@awesome.me/webawesome/dist/components/option/option.js';
import '@awesome.me/webawesome/dist/components/switch/switch.js';
// Do not duplicate these imports if using the complete main.js above.
Projeniz İçin Bir İstem
Ajan İstemi
Web Awesome 3.14.0 kapsamı belirlenmiş belirteç çalışma tezgâhını kullanın ve sağlanan wa-select, wa-option, wa-input, wa-button ve wa-switch öğelerini kaydedin. Başlangıç seçimlerini okumadan önce bileşen tanımını ve updateComplete durumunu bekleyin. --wa-border-radius-scale ve --wa-space-scale özelliklerini yalnızca örnek bölgeye uygulayın; ilgisiz sayfa içeriğini değiştirmeden bu bölgenin wa-light/wa-dark sınıfını açıp kapatın. Görünür belirteç bilgisini yerel denetimlerle eşzamanlı tutun ve etiketleri koruyun. Çalışma tezgâhını cihaz yönetimi arayüzü olarak değil, inceleme aracı olarak değerlendirin.
05
Web Awesome Tasarım Sistemi Kaynakları ve Kapsamı
Web Awesome 3.14.0 genel bileşenleri ve varsayılan tema. Düzen tercihleri bu sayfaya özgüdür; adı yerel olarak uygulamak çalışma alanı veya depolama oluşturmaz.
