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