Komponen Petunjuk – Ringkasan

Komponen HowTo

"HowTo: Komponen" adalah kumpulan komponen web yang mengimplementasikan UI umum pola-pola tersebut. Tujuan penerapan ini adalah sebagai materi edukasi. Anda dapat membaca implementasi penerapan berbagai korelasi padat komponen dan semoga bisa belajar dari mereka. Perhatikan bahwa konversi tersebut secara eksplisit BUKAN library UI dan TIDAK boleh digunakan dalam produksi.

  • <howto-checkbox>: mewakili opsi boolean dalam formulir. Jenis yang paling umum dari adalah jenis ganda yang memungkinkan pengguna beralih di antara dua pilihan—dicentang dan tidak dicentang.
  • <howto-tabs>: membatasi konten yang terlihat dengan memisahkannya menjadi beberapa panel.
  • <howto-tooltip>: pop-up yang menampilkan informasi terkait elemen saat elemen menerima fokus {i>keyboard<i} atau mouse yang melayang di atasnya.

Sasaran

Tujuan kami adalah mendemonstrasikan praktik terbaik untuk menulis komponen andal yang mudah diakses, berperforma tinggi, mudah dipelihara, dan mudah ditata. Setiap komponen sepenuhnya mandiri sehingga dapat berfungsi sebagai implementasi referensi.

Aksesibilitas

Komponen ini mengikuti Penulisan ARIA WAI Praktik, yang merupakan panduan untuk menjelaskan dan menampilkan ARIA, Aplikasi Internet yang Dapat Diakses standar. Jika Anda tidak terbiasa dengan ARIA, lihat pengantar kami tentang WebFundamentals. Setiap komponen tertaut ke bagian yang relevan dari Praktik Penulisan. Meskipun tidak sepenuhnya diperlukan, sebaiknya baca bagian Penulisan Praktik sebelum mendalami kode.

Performa

Dalam pengembangan web, istilah "kinerja" dapat diterapkan pada banyak banyak hal. Dalam konteks <howto>, performa sebagian besar mengacu pada animasi secara konsisten berjalan pada 60 fps, bahkan pada perangkat seluler.

Fleksibilitas Visual

Sebisa mungkin, komponen tidak ditata gayanya, kecuali untuk tata letak atau untuk menunjukkan status yang dipilih atau aktif. Hal ini bertujuan agar implementasi tetap fleksibel secara visual dan fokus. Dengan tidak menghabiskan waktu untuk dekorasi, kita membatasi kode hanya pada apa mutlak diperlukan agar komponen dapat berfungsi. Jika gaya apa pun diperlukan agar komponen berfungsi, gaya akan ditandai dengan komentar menjelaskan penyebabnya.

Kode yang dapat dikelola

Sebagai HowTo: Komponen adalah referensi implementasi, kita menghabiskan waktu ekstra untuk menulis konten yang mudah dibaca dan kode yang mudah dipahami dengan banyak komentar.

Non-Sasaran

Berupa library / framework / toolkit

Komponen <howto> tidak dipublikasikan di npm, bower, atau platform lainnya karena tidak dimaksudkan untuk digunakan dalam produksi. Secara singkat, kode yang dapat dibaca, kami menggunakan JavaScript API modern dan mendukung {i>browser<i} yang menerapkan standar Komponen Web. Anda akan dapat menyesuaikan kode agar sesuai dengan kebutuhan Anda sendiri setelah membaca implementasi yang tepat.

Kompatibel dengan versi sebelumnya

Kode tidak boleh diandalkan secara langsung. Kita mungkin, dan kemungkinan besar akan, secara drastis mengubah implementasi dan API elemen apa pun jika ditemukan. Ini adalah sumber kehidupan di mana kita dapat berbagi, menjelajahi, dan mendiskusikan praktik terbaik untuk membangun UI web.

Lengkap

Saat ini kami tidak (dan mungkin tidak akan) menerapkan *semua *komponen yang dapat yang ditemukan dalam Praktik Penulis ARIA WAI. Namun, menggunakan kembali prinsip-prinsip yang digunakan di komponen <howto> lainnya harus memungkinkan pembaca mengimplementasikan komponen apa pun yang tidak ada.