Tab
Menyembunyikan konten yang setara. Dua gaya: garis bawah (baku) dan pil (untuk penyaring). Bisa dikendalikan keyboard dengan panah kiri/kanan.
Tab garis bawah
Peran ARIA lengkap: tablist, tab, tabpanel.
Kelas X IPA 1 · 32 siswa · wali kelas Siti Nurhaliza.
32 siswa terdaftar, 30 aktif minggu ini.
8 kuis, 3 sedang berjalan.
Nama kelas, wali kelas, dan visibilitas.
Lihat kode
<div class="ck-tabs">
<div class="ck-tabs__list" role="tablist" aria-label="Bagian kelas">
<button class="ck-tab" role="tab" aria-selected="true" aria-controls="tp-1" id="tb-1">Ringkasan</button>
<button class="ck-tab" role="tab" aria-selected="false" aria-controls="tp-2" id="tb-2">Siswa <span class="ck-tab__count">32</span></button>
<button class="ck-tab" role="tab" aria-selected="false" aria-controls="tp-3" id="tb-3">Kuis <span class="ck-tab__count">8</span></button>
<button class="ck-tab" role="tab" aria-selected="false" aria-controls="tp-4" id="tb-4">Pengaturan</button>
</div>
<div class="ck-tabpanel" role="tabpanel" id="tp-1" aria-labelledby="tb-1"><p class="ck-text ck-muted">Kelas X IPA 1 · 32 siswa · wali kelas Siti Nurhaliza.</p></div>
<div class="ck-tabpanel" role="tabpanel" id="tp-2" aria-labelledby="tb-2" hidden><p class="ck-text ck-muted">32 siswa terdaftar, 30 aktif minggu ini.</p></div>
<div class="ck-tabpanel" role="tabpanel" id="tp-3" aria-labelledby="tb-3" hidden><p class="ck-text ck-muted">8 kuis, 3 sedang berjalan.</p></div>
<div class="ck-tabpanel" role="tabpanel" id="tp-4" aria-labelledby="tb-4" hidden><p class="ck-text ck-muted">Nama kelas, wali kelas, dan visibilitas.</p></div>
</div>
Tab gaya pil
Untuk penyaring daftar: Semua / Berlangsung / Selesai.
12 kuis.
3 kuis sedang berjalan.
9 kuis sudah ditutup.
Lihat kode
<div class="ck-tabs ck-tabs--pills">
<div class="ck-tabs__list" role="tablist" aria-label="Saring kuis">
<button class="ck-tab" role="tab" aria-selected="true" aria-controls="pp-1" id="pb-1">Semua</button>
<button class="ck-tab" role="tab" aria-selected="false" aria-controls="pp-2" id="pb-2">Berlangsung</button>
<button class="ck-tab" role="tab" aria-selected="false" aria-controls="pp-3" id="pb-3">Selesai</button>
</div>
<div class="ck-tabpanel" role="tabpanel" id="pp-1" aria-labelledby="pb-1"><p class="ck-text ck-muted">12 kuis.</p></div>
<div class="ck-tabpanel" role="tabpanel" id="pp-2" aria-labelledby="pb-2" hidden><p class="ck-text ck-muted">3 kuis sedang berjalan.</p></div>
<div class="ck-tabpanel" role="tabpanel" id="pp-3" aria-labelledby="pb-3" hidden><p class="ck-text ck-muted">9 kuis sudah ditutup.</p></div>
</div>