HowTo Bileşenleri
"HowTo: Bileşenler", yaygın kullanıcı arayüzü kalıplarını uygulayan bir web bileşenleri koleksiyonudur. Bu uygulamaların amacı, eğitim kaynağı olmaktır. Farklı bileşenlerin yoğun şekilde yorumlanmış uygulamalarını okuyabilir ve bunlardan bilgi edinebilirsiniz. Bu kitaplıkların kullanıcı arayüzü kitaplığı DEĞİLDİR ve üretimde KULLANILMAMASI gerekir.
Bileşenler
<howto-checkbox>: Formdaki bir boole seçeneğini temsil eder. En yaygın onay kutusu türü, kullanıcının işaretli ve işaretsiz olmak üzere iki seçenek arasında geçiş yapmasına olanak tanıyan ikili türdür.<howto-tabs>: Görünür içeriği birden fazla panele ayırarak sınırlandırır.<howto-tooltip>: Öğe klavye odağına alındığında veya fareyle üzerine gelindiğinde öğeyle ilgili bilgileri gösteren pop-up.
Hedefler
Hedefimiz, erişilebilir, performanslı, sürdürülebilir ve stili kolayca değiştirilebilen sağlam bileşenler yazmayla ilgili en iyi uygulamaları göstermektir. Her bileşen tamamen bağımsız olduğundan referans uygulama olarak kullanılabilir.
Erişilebilirlik
Bileşenler, Erişilebilir Zengin İnternet Uygulaması standardı olan ARIA'yı açıklamak ve göstermek için bir rehber olan WAI ARIA Yazarlık Uygulamaları'na yakından uyar. ARIA hakkında bilginiz yoksa WebFundamentals'daki girişimize göz atın. Her bileşen, İçerik Üretim Uygulamaları'nın ilgili bölümüne bağlantı verir. Kodlamaya başlamadan önce Yazarlık Uygulamaları bölümünü okumanız kesinlikle gerekli olmasa da önerilir.
Performans
Web geliştirmede "performans" terimi birçok şeye uygulanabilir. <howto> bağlamında performans, çoğunlukla mobil cihazlarda bile 60 fps'de tutarlı bir şekilde çalışan animasyonlar anlamına gelir.
Görsel Esneklik
Mümkün olduğunca bileşenlere stil uygulanmaz. Yalnızca düzen veya seçili ya da etkin durumu belirtmek için stil uygulanabilir. Bu, uygulamanın görsel olarak esnek ve odaklanmış olmasını sağlamak içindir. Süslemeye zaman harcamamak için kodu yalnızca bileşenin çalışması için kesinlikle gerekli olan öğelerle sınırlandırırız. Bileşenin çalışması için herhangi bir stil gerekiyorsa stil, neden gerekli olduğunu açıklayan bir yorumla işaretlenir.
Sürdürülebilir kod
HowTo: Components bir referans uygulama olduğundan, yoğun şekilde yorumlanmış, okunaklı ve kolayca anlaşılır kod yazmak için fazladan zaman harcadık.
Hedef Olmayan Veriler
Kitaplık / çerçeve / araç seti olmalıdır.
<howto> bileşenleri, üretimde kullanılmak üzere tasarlanmadıkları için npm, bower veya başka bir platformda yayınlanmaz. Özet ve okunaklı kodlar için modern JavaScript API'lerini kullanıyor ve Web Bileşenleri standartlarını uygulayan modern tarayıcıları destekliyoruz. Bu uygulamaları okuduktan sonra kodu kendi ihtiyaçlarınıza göre uyarlayabilirsiniz.
Geriye dönük uyumlu olmalıdır.
Kod doğrudan kullanılmamalıdır. Daha iyi bir uygulama bulunursa herhangi bir öğenin uygulamasını ve API'sini önemli ölçüde değiştirebiliriz ve büyük olasılıkla değiştiririz. Bu, web kullanıcı arayüzleri oluşturmayla ilgili en iyi uygulamaları paylaşabileceğimiz, keşfedebileceğimiz ve tartışabileceğimiz dinamik bir kaynaktır.
Tam olmalı
Şu anda WAI ARIA Yazarlık Uygulamaları'nda bulunabilen *tüm *bileşenleri uygulamamaktayız (ve muhtemelen uygulamayacağız). Ancak diğer <howto> bileşenlerinde kullanılan ilkeleri yeniden kullanmak, okuyucuların eksik bileşenleri uygulamasını sağlar.