Komponen HowTo
"HowTo: Components" adalah kumpulan komponen web yang menerapkan pola UI umum. Tujuan dari implementasi ini adalah untuk menjadi sumber daya pendidikan. Anda dapat membaca implementasi berbagai komponen yang banyak dikomentari dan berharap dapat belajar darinya. Perhatikan bahwa library ini secara eksplisit BUKAN library UI dan TIDAK boleh digunakan dalam produksi.
Komponen
<howto-checkbox>: merepresentasikan 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 menjadi beberapa panel.<howto-tooltip>: pop-up yang menampilkan informasi terkait suatu elemen saat elemen menerima fokus keyboard atau kursor diarahkan ke atasnya.
Tujuan
Tujuan kami adalah mendemonstrasikan praktik terbaik untuk menulis komponen kuat yang dapat diakses, berperforma tinggi, mudah dikelola, dan mudah ditata. Setiap komponen benar-benar berdiri sendiri sehingga dapat berfungsi sebagai implementasi referensi.
Aksesibilitas
Komponen tersebut mengikuti WAI ARIA Authoring Practice, yang merupakan panduan untuk menjelaskan dan menampilkan ARIA, standar Aplikasi Internet Kaya yang Dapat Diakses. Jika Anda tidak terbiasa dengan ARIA, lihat pengantar kami di WebFundamentals. Setiap komponen terhubung ke bagian Praktik Penulisan yang relevan. Meskipun tidak terlalu diperlukan, sebaiknya baca bagian Praktik Penulisan sebelum mendalami 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 membuat implementasinya tetap fleksibel dan fokus secara visual. Dengan tidak menghabiskan waktu untuk dekorasi, kita membatasi kode hanya pada hal yang benar-benar diperlukan agar komponen dapat berfungsi. Jika ada gaya yang diperlukan agar komponen dapat berfungsi, gaya tersebut akan ditandai dengan komentar yang menjelaskan alasannya.
Kode yang dapat dikelola
Sebagai Petunjuk: Komponen adalah implementasi referensi, kami menghabiskan waktu ekstra untuk menulis kode yang dapat dibaca dan mudah dipahami yang banyak diberi komentar.
Non-Sasaran
Berupa library / framework / toolkit
Komponen <howto> tidak dipublikasikan di npm, bower, atau platform lainnya
karena tidak dimaksudkan untuk digunakan dalam produksi. Agar kode singkat 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 setelah membaca
implementasi ini.
Kompatibel dengan versi lama
Kode tidak boleh diandalkan secara langsung. Kami mungkin, dan sangat mungkin akan, mengubah implementasi dan API elemen apa pun secara drastis jika implementasi yang lebih baik ditemukan. Ini adalah sumber daya hidup yang dapat kita gunakan untuk berbagi, mengeksplorasi, dan membahas praktik terbaik untuk membangun UI web.
Harus lengkap
Saat ini kami tidak (dan mungkin tidak akan) menerapkan *semua *komponen yang dapat
ditemukan di Praktik Penulisan ARIA WAI. Namun, menggunakan kembali prinsip yang digunakan
dalam komponen <howto> lainnya harus memungkinkan pembaca untuk mengimplementasikan komponen
apa pun yang hilang.