UI akordeon telah lama menjadi favorit para desainer web. Ini berguna untuk menyimpan sejumlah besar konten dalam ruang terbatas. Plus, itu menambahkan jenis interaktivitas yang disukai klien di perangkat seluler dan desktop.
Akordeon juga berkembang cukup banyak. Berkat kemajuan dalam CSS dan JavaScript, sekarang dimungkinkan untuk melampaui UI standar yang biasa kita lihat. Segala sesuatu mulai dari animasi hingga penyelarasan dapat diubah untuk membuat sesuatu yang unik.
Hari ini, kami akan memperkenalkan delapan UI akordeon yang menunjukkan apa yang dapat dicapai dengan teknik pengkodean modern. Mari kita mulai!
Akordeon Horizontal CSS Murni oleh Aysha Anggraini
UI Accordion secara tradisional vertikal – tetapi tidak ada aturan yang mengatakan bahwa segala sesuatunya harus tetap seperti itu. Cuplikan berorientasi horizontal ini mengungkapkan konten saat mengarahkan kursor. Lebih baik lagi adalah tidak ada JavaScript yang diperlukan.
Lihat Pena Akordeon Horizontal CSS Murni oleh Aysha Anggraini
Akordeon CSS Murni yang Funky oleh Jamie Coulter
CSS memberi kekuatan dan gaya pada akordeon ini, mengubahnya menjadi daftar acara interaktif. Animasi digunakan untuk membantu transisi tab dan memperkenalkan ikon dekoratif. Secara keseluruhan, ini adalah UI yang apik dan menunjukkan bahwa akordeon dapat berguna dan indah.
Lihat Pena Akordeon CSS Murni yang Funky oleh Jamie Coulter
Akordeon Minimal di React oleh Matthew Vincent
Pustaka JavaScript seperti React juga merupakan lahan subur untuk membangun komponen akordeon. Cuplikan menarik ini menampilkan animasi yang halus dan desain minimal. Ini sangat cocok untuk aplikasi web modern.
Lihat Pena Akordeon – Bereaction oleh Matthew Vincent
Akordeon Asli dengan oleh Giana
Dengan details elemen HTML, Anda tidak lagi memerlukan bahasa lain untuk membuat UI akordeon. Seperti dalam contoh ini, CSS hanya digunakan sebagai cara untuk meningkatkan gaya. Fitur asli ini berarti kinerja yang hebat dan aksesibilitas yang lebih banyak. Oh, dan itu juga didukung oleh semua browser modern!
Lihat Pena Akordeon asli dengan
Akordeon yang Dapat Diakses ARIA oleh Kiri Egington
Aksesibilitas adalah perhatian utama untuk semua elemen UI. Untuk akordeon, fokusnya lebih dari sekadar font yang dapat dibaca dan rasio kontras warna yang dapat diterima. Kemampuan untuk menavigasi setiap bagian melalui keyboard juga penting – di situlah cuplikan ini masuk. Dengan menggunakan TAB dan ENTER kunci, dimungkinkan untuk menelusuri setiap bagian dan mengonsumsi kontennya.
Lihat Pena Akordeon yang Dapat Diakses ARIA oleh Kiri Egington
Akordeon (Vanilla JS) yang Merendahkan dengan Anggun oleh Keith Pickering
Seperti yang kami sebutkan sebelumnya, akordeon bertenaga HTML dimungkinkan melalui details elemen. Namun, pengalaman pengguna masih dapat ditingkatkan. Di sini, CSS dan vanilla JavaScript telah digunakan untuk menambahkan animasi dan menghitung tinggi setiap bagian. Jika pengguna tidak mengaktifkan JavaScript, UI akan menurun dengan lancar.
Lihat Pena Akordeon
CSS Akordeon Murni oleh Tuna
Akordeon CSS murni ini menunjukkan beberapa fitur desain pintar yang dapat ditambahkan ke dalam campuran. Penulis memanfaatkan tipografi untuk memastikan bahwa setiap judul bagian menonjol. Selain itu, tautan hashtag digunakan untuk secara teoritis membawa pengguna ke subjek terkait. Ada banyak kemungkinan untuk masuk ke dalam ruang yang relatif kecil.
Lihat Pena Akordeon oleh Tuna
Galeri Akordeon CSS Responsif dengan Animasi Zoom oleh Daniel Subat
Galeri foto berbasis akordeon? Tidak hanya itu mungkin, tetapi juga diterapkan dengan sangat baik dalam cuplikan ini. Ada banyak hal yang bisa dijelajahi: Filter gambar CSS, efek hover, dan transformasi membuat UX yang menarik. Terlepas dari semua kebaikan itu, jumlah kode di balik layar sangat minim.
Lihat Pena animasi zoom galeri akordeon (css, responsif) oleh Daniel Subat
Keluarkan Akordeon
UI akordeon telah bertahan dalam ujian waktu. Syukurlah penampilan mereka akhirnya sesuai dengan utilitas mereka. Desainer dapat memanfaatkan CSS terbaru untuk mencapai hampir semua gaya, sementara JavaScript dapat menambahkan fungsionalitas tingkat lanjut.
Mungkin wahyu terbesar adalah kemampuan untuk membuat antarmuka ini menggunakan HTML asli. Ini menempatkan kompatibilitas dan aksesibilitas di garis depan. Ini juga memastikan bahwa kami akan menambahkan akordeon ke proyek kami untuk tahun-tahun mendatang.
Ingin melihat lebih banyak contoh tentang apa yang dapat dilakukan UI akordeon? Lihat kami Koleksi CodePen.
