"HowTo: Components" adalah kumpulan komponen web yang mengimplementasikan pola UI umum. Tujuan implementasi ini adalah untuk menjadi referensi edukasi. Anda dapat membaca implementasi berbagai komponen yang diberi banyak komentar dan semoga dapat mempelajarinya. 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 di antara dua pilihan—dicentang dan tidak dicentang.<howto-tabs>: membatasi konten yang terlihat dengan memisahkannya ke dalam beberapa panel.<howto-tooltip>: pop-up yang menampilkan informasi terkait elemen saat elemen menerima fokus keyboard atau kursor mouse diarahkan ke elemen tersebut.
Sasaran
Tujuan kami adalah menunjukkan praktik terbaik untuk menulis komponen yang andal, mudah diakses, berperforma tinggi, mudah dikelola, dan mudah diberi gaya. Setiap komponen sepenuhnya mandiri sehingga dapat berfungsi sebagai implementasi referensi.
Aksesibilitas
Komponen ini sangat mengikuti Praktik Penulisan WAI ARIA, yang merupakan panduan untuk menjelaskan dan menampilkan ARIA, standar Accessible Rich Internet Application. Jika Anda belum memahami ARIA, lihat pengantar kami di WebFundamentals. Setiap komponen ditautkan ke bagian yang relevan dalam Praktik Penulisan. Meskipun tidak mutlak 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 penerapan 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 ada gaya yang diperlukan agar komponen dapat berfungsi, gaya tersebut akan ditandai dengan komentar yang menjelaskan alasannya.
Kode yang mudah dikelola
Karena HowTo: Components adalah implementasi referensi, kami menghabiskan waktu ekstra untuk menulis kode yang mudah dibaca dan dipahami serta diberi banyak komentar.
Non-sasaran
Menjadi library/framework/toolkit
Komponen <howto> tidak dipublikasikan di npm, bower, atau platform lainnya
karena tidak dimaksudkan untuk digunakan dalam produksi. Demi kode yang ringkas dan mudah 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.
Kompatibel dengan versi lama
Kode ini tidak boleh diandalkan secara langsung. Kami mungkin, dan sangat mungkin akan, mengubah implementasi dan API elemen apa pun secara drastis jika ditemukan implementasi yang lebih baik. Ini adalah referensi dinamis tempat kita dapat berbagi, menjelajahi, dan mendiskusikan praktik terbaik untuk membangun UI web.
Berikan informasi yang lengkap
Kami tidak (dan mungkin tidak akan) menerapkan *semua *komponen yang dapat
ditemukan di Praktik Penulisan WAI ARIA. Namun, menggunakan kembali prinsip yang digunakan
dalam komponen <howto> lainnya akan memungkinkan pembaca menerapkan komponen
yang tidak ada.