Advertisement
  1. Web Design
  2. JavaScript

Cara Membangun Komponen Tab Responsif Dengan CSS dan Sentuhan JavaScript

by
Read Time:4 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Febri Ardian Sanjoyo (you can also view the original English article)

Dalam tutorial ini, kita akan belajar cara membuat komponen tab responsif dengan CSS dan sedikit JavaScript. Sangat mungkin untuk membuat komponen pure CSS tab, tetapi untuk contoh ini mari kita menerapkan keterampilan JavaScript kami.

Inilah yang akan kita bangun, dalam beberapa langkah besar:

Catatan: Tutorial ini tidak akan fokus pada cara membuat komponen tab yang dapat diakses, jadi menjelajahi aksesibilitas tentu akan menjadi langkah berikutnya yang valid.

1. The HTML

Untuk memulainya, mari kita periksa markup yang diperlukan. Kita memiliki wadah yang mencakup tab itu sendiri (list item), serta konten untuk setiap tab (tab panel). Untuk mengaitkan tab dengan panel yang sesuai, kita menggunakan atribut custom data-index yang menyimpan nilai unik untuk setiap panel tab. Dikatakan, karena penomoran berbasis Nol, panel dengan data-index = 0 dikaitkan dengan tab pertama, panel dengan data-index = 1 dikaitkan dengan yang kedua, dan seterusnya.

Berikut adalah markup HTML:

2. CSS

Sebagai langkah selanjutnya, mari kita tentukan beberapa aturan CSS untuk komponen kita. Tidak ada yang terlalu fancy, hanya beberapa basic style. Satu hal yang perlu diperhatikan adalah bahwa kita tidak menggunakan transisi apa pun (misalnya fade, slide) untuk beralih antar panel tab; sebaliknya ini muncul dan menghilang dengan sakelar on/off yang sederhana.

Berikut ini initial style nya:

3. JavaScript

Dengan HTML dan CSS di tempatnya, inilah waktunya untuk melihat kode JavaScript yang diperlukan.

Setiap kali kita mengeklik tab, kita melakukan hal-hal berikut:

  • Hapus active class dari tab yang sesuai (secara default yang pertama) dan panel tab yang terkait (secara default yang pertama).
  • Temukan li parent dari tab ini, tambahkan active class ke dalamnya, dan ambil indeksnya.
  • Temukan panel tab yang memiliki nilai atribut (untuk atribut data-index) sesuai dengan nilai indeks yang disebutkan sebelumnya dan tetapkan active class ke nilai tersebut.

Berikut kode JavaScript yang dihasilkan:

4. Menuju Responsif

Komponen kita hampir siap! Hal terakhir yang harus kita lakukan adalah membuat komponen menjadi responsif. Jadi, misalnya, ketika viewport memiliki lebar maksimum 600px, itu harus collapse dan terlihat seperti ini:

How the tab component looks like on small screensHow the tab component looks like on small screensHow the tab component looks like on small screens

Karena kita menggunakan pendekatan desktop-first, ini adalah aturan CSS yang harus kita timpa:

5. Dukungan Browser

Demo kita berfungsi dengan baik di semua browser dan perangkat terbaru. Seperti biasa dengan tutorial saya, kita menggunakan Babel untuk mengkompilasi kode ES6 ke ES5.

Kesimpulan

Dalam tutorial singkat ini, kita berhasil membuat komponen tab responsif yang bermanfaat dengan HTML, CSS, dan JavaScript. Sekali lagi, komponen ini tidak dapat diakses dengan baik, tetapi jika Anda ingin meningkatkan fungsinya, itu akan menjadi langkah selanjutnya yang baik. Selamat coding!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.