Komponen HowTo
"HowTo: Components" adalah kumpulan komponen web yang mengimplementasikan pola UI umum. Tujuan implementasi ini adalah untuk menjadi referensi pendidikan. Anda dapat membaca implementasi berbagai komponen dengan komentar yang padat dan semoga dapat belajar darinya. Perhatikan bahwa library ini secara eksplisit BUKAN library UI dan TIDAK boleh digunakan dalam produksi.
Komponen
<howto-checkbox>: mewakili opsi boolean dalam formulir. Jenis kotak centang yang paling umum adalah jenis ganda yang memungkinkan pengguna beralih 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 keyboard atau mouse mengarahkan kursor ke atasnya.
Sasaran
Tujuan kami adalah menunjukkan praktik terbaik untuk menulis komponen andal yang mudah diakses, berperforma tinggi, mudah dikelola, dan mudah ditata gayanya. Setiap komponen sepenuhnya mandiri sehingga dapat berfungsi sebagai implementasi referensi.
Aksesibilitas
Komponen ini mengikuti Praktik Penulisan WAI ARIA, yang merupakan panduan untuk menjelaskan dan menampilkan ARIA, standar Accessible Rich Internet Application. Jika Anda tidak terbiasa dengan ARIA, lihat pengantar kami di WebFundamentals. Setiap komponen ditautkan ke bagian Praktik Penulisan yang relevan. Meskipun tidak sepenuhnya diperlukan, sebaiknya baca bagian Praktik Penulisan sebelum mempelajari kode.
Performa
Dalam pengembangan web, istilah "performa" dapat diterapkan ke banyak
hal. Dalam konteks <howto>, performa sebagian besar mengacu pada animasi
yang berjalan secara konsisten pada 60 fps, bahkan di perangkat seluler.
Fleksibilitas Visual
Sebisa mungkin, komponen tidak diberi gaya, kecuali untuk tata letak atau untuk menunjukkan status yang dipilih atau aktif. Hal ini untuk menjaga implementasi tetap fleksibel dan fokus secara visual. Dengan tidak menghabiskan waktu untuk dekorasi, kita membatasi kode hanya pada hal yang benar-benar diperlukan untuk membuat komponen berfungsi. Jika gaya apa pun diperlukan agar komponen berfungsi, gaya tersebut akan ditandai dengan komentar yang menjelaskan alasannya.
Kode yang dapat dikelola
Karena HowTo: Components adalah implementasi referensi, kami menghabiskan waktu ekstra untuk menulis kode yang mudah dibaca dan dipahami yang memiliki banyak komentar.
Non-Sasaran
Merupakan library / framework / toolkit
Komponen <howto> tidak dipublikasikan di npm, bower, atau platform lainnya
karena tidak dimaksudkan untuk digunakan dalam produksi. Untuk kode yang ringkas dan
dapat dibaca, kami menggunakan JavaScript API modern dan mendukung browser
modern yang menerapkan standar Komponen Web. Anda
akan dapat menyesuaikan kode agar sesuai dengan kebutuhan Anda sendiri setelah membaca
implementasi ini.
Memiliki kompatibilitas mundur
Kode tidak boleh diandalkan secara langsung. Kami mungkin, dan sangat mungkin akan, mengubah penerapan dan API elemen apa pun secara drastis jika penerapan yang lebih baik ditemukan. Ini adalah referensi aktif tempat kita dapat berbagi, menjelajahi, dan membahas praktik terbaik untuk membuat UI web.
Selesai
Saat ini kami tidak (dan mungkin tidak akan) mengimplementasikan *semua *komponen yang dapat
ditemukan dalam Praktik Penulisan WAI ARIA. Namun, penggunaan kembali prinsip yang digunakan
dalam komponen <howto> lainnya akan memungkinkan pembaca menerapkan komponen
yang hilang.