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