htmlcssjavascripttabspengaturanPemula8 mnt baca

Tabs Vertikal

Membangun navigasi tab vertikal seperti di halaman pengaturan aplikasi.

Kenapa Tabs Vertikal?

Halaman pengaturan (settings) di aplikasi memakai menu vertikal di kiri dan konten di kanan. Berbeda dengan tabs horizontal, tabs vertikal muat banyak item dan label panjang, cocok untuk dashboard dan dokumentasi.

Langkah Membangun

HTML: Layout dua kolom: <aside> berisi tombol-tombol tab (dengan ikon), dan <div class="panel-area"> berisi panel-panel konten.

CSS: Grid atau flex dua kolom. Tombol tab aktif punya background ungu muda dan garis aksen di kiri (border-left tebal). Di HP, tab vertikal berubah menjadi dropdown atau tab horizontal scroll (media query).

JS: Pola identik dengan tabs horizontal: klik tombol -> hapus aktif dari semua -> aktifkan tombol dan panel yang cocok via data-tab.

Reuse Pola

Perhatikan: logika JS-nya SAMA PERSIS dengan tabs horizontal. Hanya CSS yang berbeda. Ini pelajaran penting: pisahkan logika dari tampilan, dan satu pola bisa dipakai ulang untuk banyak varian visual.

Kesalahan Umum

  • Panel konten tidak sejajar atas dengan tab pertama (atur align-items: flex-start).
  • Di HP tab vertikal memakan terlalu banyak ruang (ubah jadi horizontal scroll di media query).
  • Tidak ada indikasi visual tab aktif yang jelas (kombinasikan background + border aksen + font bold).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Simpan Tab Terakhir

Simpan tab terakhir yang dibuka ke localStorage, dan saat halaman dibuka kembali langsung tampilkan tab tersebut.

Kuis Bab

Uji pemahamanmu: Formulir & Input

Jawab 5 soal berikut, lalu tekan "Periksa Jawaban".

1.Kenapa memakai tag <form> sungguhan lebih baik daripada <div> untuk formulir?

2.Apa fungsi e.preventDefault() di event submit form?

3.Pola apa yang dipakai agar dropdown tertutup saat pengguna klik di luar?

4.Apa itu debounce dalam konteks pencarian real-time?

5.Untuk menutup daftar autocomplete lewat keyboard, tombol apa yang standar dipakai?