Nasıl Yapılır Bileşenleri
"HowTo: Bileşenler" ortak kullanıcı arayüzü uygulayan web bileşenleri koleksiyonudur. belirler. Bu uygulamaların amacı bir eğitim kaynağı olmaktır. Farklı kontrol panellerinin, yoğun yorum alanlarından ve onlardan ders çıkarmasını umuyorum. Açıkça DEĞİL bir kullanıcı arayüzü kitaplığıdır ve üretimde KULLANILMAMALIDIR.
Bileşenler
<howto-checkbox>
: Formdaki bir boole seçeneğini temsil eder. En yaygın olarak kullanılan onay kutusu, kullanıcının iki seçenek arasında (işaretli ve işaretli değil) geçiş yapmasına olanak tanıyan çift türdür.<howto-tabs>
: Görünür içeriği birden fazla panele bölerek sınırlar.<howto-tooltip>
: Bir öğe tıklandığında bu öğeyle ilgili bilgileri görüntüleyen bir pop-up veya fare imleci bu düğmenin üzerine getirdiğinde
Hedefler
Amacımız, UA değerinize uygun güçlü bileşenler yazmaya yönelik en iyi uygulamaları erişilebilir, performansı yüksek, bakımı yapılabilir ve şekillendirilmesi kolay. Her bileşen başvurulacak bir kaynak olması açısından, tamamen bağımsız olması gerekir.
Erişilebilirlik
Bileşenler WAI ARIA Yazma yönelik bir rehber olan Erişilebilir Rich İnternet Uygulaması standart olarak gönderin. ARIA hakkında bilginiz yoksa daha fazla bilgi için WebFundamentals (WebTemelleri). Her bileşen, Yazma Uygulamaları'nın ilgili bölümüne bağlantı verir. Bu sırada gerekli olmadığı sürece, Yazma bölümünde daha fazla Kodlamaya geçmeden önceki uygulamalar.
Performans
Web geliştirmede "performans" terimi pek çok farklı türde
sahip olmalıyız. <howto>
bağlamında performans çoğunlukla animasyonlarla ilgilidir.
mobil cihazlarda bile sürekli olarak 60 fps'de çalışır.
Görsel Esneklik
Bileşenlerin stil özelliklerini mümkün olduğunca durumu ifade eder. Bu, uygulamanın görsel olarak esnek olmasını sağlamak için odaklanabillirsiniz. Dekorasyon için zaman harcamadığımızdan, kodu yalnızca bileşenin işlevini yerine getirmesi için kesinlikle gereklidir. Stil gerekiyorsa bileşenin çalışması için, stil bir yorumla işaretlenir ve bunun nedenini açıklayın.
Bakım yapılabilir kod
Nasıl Yapılır?: Bileşenler referanstır okunabilir ve kolay anlaşılır metinler yazmaya zaman harcadık. ve yoğun yorum eklenen kolayca anlaşılabilir kod.
Hedef Olmayanlar
Kütüphane / çerçeve / araç seti olma
<howto>
bileşen npm, bower veya başka bir platformda yayınlanmıyor
üretimde kullanılmak üzere tasarlanmamıştır. Üzerinizde olsun diye
JavaScript API'leri kullanıyoruz ve modern JavaScript API'lerini
web Bileşenleri standartlarını uygulayan tarayıcılar. Siz
bunları okuduktan sonra kodu kendi ihtiyaçlarınıza uyacak şekilde
hakkında bilgi edindiniz.
Geriye dönük uyumlu olma
Kod doğrudan kullanılmamalıdır. Biz de büyük olasılıkla yapacağız bir öğenin uygulanmasını ve API'sini büyük ölçüde değiştirmek tespit edildiği anlamına gelir. Bu, herkese açık ve etkili bir şekilde en iyi uygulamaları keşfedip tartışın.
Eksiksiz olmalıdır
Şu anda *tüm *bileşenleri uygulamıyoruz (ve muhtemelen
WAI ARIA Yazma Uygulamaları'nda bulunabilir. Ancak, burada kullanılan ilkeleri tekrar kullanarak,
diğer <howto>
bileşende bulunan okuyucular, herhangi bir bileşeni uygulayabilmesini sağlamalıdır
bazı ipuçları vereceğim.