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

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.

  • <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.