Formatting: Tab

Tentang

Formatting Tab adalah format HTML untuk menampilkan konten dengan sistem Tab - (Demo).



Spesifikasi




Konfigurasi



Keterangan

box
Nilai Pratinjau
none Lihat
border Lihat
shadow Lihat

initial-opened
Mengatur Tab Item yang akan terbuka pada keadaan awal. Nilai berupa Judul Tab atau Urutan Tab.



Penggunaan

  1. Definisikan HTML dengan format berikut: 

            
<div class='w-tab'>
  <div title='JUDUL TAB 1'>
  	Konten TAB 1...
  </div>
  <div title='JUDUL TAB 2'>
    Konten TAB 2...
  </div>
</div>

    Konten TAB 1...
    Konten TAB 2...
    • Tab Item (elemen dengan atribut title) wajib menggunakan tag DIV.
    • Atribut title pada tab item bersifat wajib.
    • Pada HTML diatas, tidak ada satupun konfigurasi yang ditambahkan. Semua konfigurasi akan mengambil Nilai Default.


  2. Tambahkan konfigurasi yang dikehendaki dengan cara menambahkan atribut
    data-nama-konfigurasi='Nilai' pada elemen dengan class w-tab.

    Contoh: 
            
<div class='w-tab' data-box='shadow'>
  <div title='JUDUL TAB 1'>
  	Konten TAB 1...
  </div>
  <div title='JUDUL TAB 2'>
    Konten TAB 2...
  </div>
</div>

    Konten TAB 1...
    Konten TAB 2...


  3. Konfigurasi initial-opened
    Nilai konfigurasi ini bisa berupa Judul atau Urutan Tab Item.

    Contoh berdasarkan judul: 
            
<div class='w-tab' data-initial-opened='JUDUL TAB 2' data-box='border'>
  <div title='JUDUL TAB 1'>
  	Konten TAB 1...
  </div>
  <div title='JUDUL TAB 2'>
    Konten TAB 2...
  </div>
</div>

    Konten TAB 1...
    Konten TAB 2...


    CATATAN: Nilai pada konfgurasi dan Judul tab harus sama persis, termasuk penggunaan huruf besar dan huruf kecil.


    Contoh berdasarkan urutan: 
            
<div class='w-tab' data-initial-opened='2' data-box='border'>
  <div title='JUDUL TAB 1'>
  	Konten TAB 1...
  </div>
  <div title='JUDUL TAB 2'>
    Konten TAB 2...
  </div>
</div>

    Konten TAB 1...
    Konten TAB 2...
Komentar