"Nasıl Yapılır?" Bileşenleri – Genel Bakış

Nasıl Yapılır Bileşenleri

"HowTo: Bileşenler", genel kullanıcı arayüzü kalıplarını uygulayan 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 bir şeyler öğrenirsiniz. Açıkça bir kullanıcı arayüzü kitaplığı DEĞİLDİR ve üretimde KULLANILMAMALIDIR.

Bileşenler

  • <howto-checkbox>: Bir formdaki bir boole seçeneğini temsil eder. En yaygın onay kutusu türü, kullanıcının işaretli ve işaretli olmayan iki seçenek arasında geçiş yapmasına olanak tanıyan çift türdür.
  • <howto-tabs>: Görünür içeriği birden fazla panele ayırarak sınırlar.
  • <howto-tooltip>: Bir öğe klavye odağını aldığında veya fare imleci öğenin üzerine geldiğinde öğeyle ilgili bilgilerin gösterildiği bir pop-up.

Hedefler

Amacımız; erişilebilir, yüksek performanslı, bakımı kolay ve stili kolay sağlam bileşenler yazmayla ilgili en iyi uygulamaları göstermektir. Her bileşen, bir referans uygulama görevi görmek için tamamen bağımsızdır.

Erişilebilirlik

Bileşenler, Erişilebilir Zengin İnternet Uygulaması standardı olan ARIA'yı açıklayan ve gösteren bir kılavuz olan WAI ARIA Yazma Uygulamaları'nı yakından takip eder. ARIA hakkında bilginiz yoksa Web'in Temelleri ile ilgili giriş sayfamıza göz atın. Her bileşen, Yazma Uygulamaları'nın ilgili bölümüne bağlantı verir. Kesinlikle gerekli olmasa da, kodu ayrıntılı bir şekilde açıklamadan önce Yazma Uygulamaları bölümünü okumanızı öneririz.

Performans

Web geliştirmede "performans" terimi birçok şeye uygulanabilir. <howto> bağlamında performans, çoğunlukla mobil cihazlarda bile sürekli olarak 60 fps'de çalışan animasyonları ifade eder.

Görsel Esneklik

Mümkün olduğunca bileşenlerin stil özellikleri, düzen dışında veya seçili ya da etkin durumda olacak şekilde belirlenmez. Burada amaç, uygulamanın görsel olarak esnek ve odaklı olmasını sağlamaktır. Süslemeye zaman harcamayarak kodu yalnızca bileşen işlevinin çalışması için kesinlikle gerekli olanlarla sınırlıyoruz. Bileşenin çalışması için herhangi bir stil gerekiyorsa stil, bunun nedenini açıklayan bir yorumla işaretlenir.

Sürdürülebilir kod

HowTo: Bileşenler bir referans uygulaması olduğundan, yoğun şekilde yorumlanan okunabilir ve kolayca anlaşılabilir kod yazmaya daha fazla zaman harcadık.

Hedef Olmayanlar

Kitaplık / çerçeve / araç seti olmalıdır

<howto> bileşenleri üretimde kullanılmak üzere tasarlanmadığından npm, bower veya başka bir platformda yayınlanmaz. Okunabilir bir kod olması için modern JavaScript API'leri kullanıyoruz ve Web Bileşenleri standartlarını uygulayan modern tarayıcıları destekliyoruz. Bu uygulamaları okuduktan sonra kodu kendi ihtiyaçlarınıza göre uyarlayabileceksiniz.

Geriye dönük uyumlu olma

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 bunu da büyük olasılıkla yapacağız. Bu, web kullanıcı arayüzleri oluşturmaya yönelik en iyi uygulamaları paylaşabileceğimiz, keşfedebileceğimiz ve tartışabileceğimiz canlı bir kaynak.

Eksiksiz olma

Şu anda WAI ARIA Yazma Uygulamaları'nda bulunan *tüm *bileşenleri uygulamıyoruz (ve muhtemelen uygulamayacağız). Ancak diğer <howto> bileşenlerinde kullanılan ilkelerin tekrar kullanılması, okuyucuların eksik olan bileşenleri uygulayabilmesini sağlamalıdır.