Saya ingin berbicara tentang elemen <details> yang luar biasa dan menunjukkan beberapa contoh penggunaannya, dari yang sederhana hingga yang gila.
Anda terbiasa dengan model tata letak komponen yang dapat mengubah statusnya dari terlihat menjadi tersembunyi:
.component { display:none; } .component.open { display:block; }
toggleButton.onclick = () => component.classList.toggle('open')
Sekarang lupakan. Ada item yang bisa melakukan ini di luar kotak. Meet - <details>
Elemen HTML <details> digunakan untuk mengungkapkan informasi tersembunyi (tambahan).
Aplikasi dasar
Pertama-tama, mari kita lihat bagaimana elemen ini bekerja:
Harap perhatikan bahwa contoh ini berfungsi tanpa gaya atau JavaScript tambahan. Semua fungsionalitas dibangun ke dalam browser itu sendiri.
Secara default, teks yang terlihat tergantung pada pengaturan bahasa sistem Anda, tetapi Anda dapat mengubahnya dengan menambahkan elemen <summary> ke <details> <summary> :
Untuk mengubah status elemen dalam html Anda hanya perlu menambahkan atribut open
<details open> ... </details> <details> ... </details>
Dan untuk mengelola keadaan menggunakan JavaScript, disediakan API khusus:
const details = document.querySelector('details') details.open = true
Beberapa kata tentang aksesibilitas
Elemen <summary> bisa <summary> . Artinya, bergerak di sekitar halaman dari keyboard Anda akan sampai ke elemen ini. Tetapi konten dapat masuk ke fokus hanya jika <details> terbuka, artinya, fokus tidak akan pernah jatuh pada elemen yang tidak terlihat di dalam <details> .
Biasanya, pembaca layar dapat melakukannya dengan baik dengan penggunaan standar <details> dan <summary> . Ada beberapa variasi dalam iklan tergantung pada program dan browser. Lebih detail .
Contoh Penggunaan
Selanjutnya, saya kira-kira akan mengulangi beberapa komponen dari dokumentasi bootstrap, tetapi dengan sedikit atau tanpa JavaScript.
Ubah penanda
Hal pertama yang Anda butuhkan adalah mengubah penampilan marker. Ini dilakukan dengan sangat sederhana:
summary::-webkit-details-marker { }
Atau Anda dapat menyembunyikan marker standar dan mengimplementasikannya sendiri
details summary::-webkit-details-marker { display: none } details > summary { list-style: none; } details summary:before { content: '\f0fe'; font-family: "Font Awesome 5 free"; margin-right: 7px; } details[open] summary:before { content: '\f146'; }
Ciutkan komponen
Semuanya sederhana di sini. Fungsionalitas dasarnya sama. Hanya perlu sedikit mengubah tampilan:
Komponen akordion
Mari kita ulangi contoh sebelumnya, sedikit mengubah tampilan <summary> dan dapatkan akordeon:
Tapi, seperti yang Anda lihat, satu elemen tidak menutup ketika yang lain terbuka. Untuk mencapai ini, kita perlu beberapa baris JavaScript. Anda perlu melacak tampilan atribut terbuka di salah satu elemen <details> dan menghapusnya dari yang lain:
Komponen popover
Implementasi ini sangat mirip dengan Komponen Runtuh, dengan perbedaan bahwa konten <details> memiliki posisi absolut dan tumpang tindih konten.
Komponen tarik-turun
Pada dasarnya, ini adalah Komponen Popover yang sama. Hanya tampilannya yang berbeda.
Contoh yang sama, hanya dengan tombol terpisah
Tetapi Komponen Dropdown memiliki satu lagi perbedaan penting: pada klik di luar itu harus disembunyikan. Untuk menerapkan ini lagi, Anda harus menulis beberapa baris JavaScript.
Komponen modal
Dan akhirnya, contoh jendela modal.
Secara umum, <details> bukan pilihan terbaik untuk mengimplementasikan komponen ini. Ada elemen yang jauh lebih cocok - <dialog> , tetapi memiliki dukungan browser yang sangat buruk.
Referensi
Dapatkah saya Menggunakan elemen Detail & Ringkasan
Elemen detail MDN
Elemen detail W3C
UPD
Saya memutuskan untuk menambahkan contoh lain menggunakan <details> - navigasi multi-level. Sekali lagi saya ingin menarik perhatian Anda pada fakta bahwa contoh ini berfungsi tanpa JavaScript. Dan itu jauh lebih inklusif daripada tata letak tradisional pada <div> .