Formatting: List

Tentang

Formatting List adalah format HTML dan konfigurasi yang bisa digunakan untuk menampilkan daftar dengan lebih menarik - (Demo).



Spesifikasi




Konfigurasi



Keterangan

marker-icon
Nilai Pratinjau
bullet
  • Item 1
  • Item 2
arrow
  • Item 1
  • Item 2
plus
  • Item 1
  • Item 2
minus
  • Item 1
  • Item 2
check
  • Item 1
  • Item 2
x
  • Item 1
  • Item 2

CATATAN:
Konfigurasi marker-icon hanya bisa ditambahkan pada elemen UL (Unordered List). Untuk elemen OL (Ordered List), icon akan selalu berupa Nomor.

marker-box
Nilai Pratinjau
none
  • Item 1
  • Item 2
square
  • Item 1
  • Item 2
circle
  • Item 1
  • Item 2

CATATAN:
Konfigurasi marker-box hanya tersedia untuk marker-icon selain bullet.

marker-skin
Konfigurasi ini digunakan sebagai warna icon. Secara default, masing-masing icon memiliki skin yang berbeda. Anda dapat mengubah konfigurasi default ini melalui konfigurasi marker-skin. Pilih salah satu skin yang tersedia pada Daftar Skin.

formatting
Secara default, sistem akan memproses semua elemen OL dan UL pada penggunaan yang didukung sesuai data spesifikasi. Dengan memberikan nilai no pada konfigurasi ini, elemen OL dan UL yang bersangkutan tidak akan diproses dengan formatting (akan menggunakan style default browser).



Penggunaan

  1. Pembuatan elemen UL (daftar dengan icon) 

            
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

    • Item 1
    • Item 2
    • Item 3


    Keterangan: Pada HTML diatas, tidak ada satupun konfigurasi yang ditambahkan. Semua konfigurasi akan mengambil Nilai Default.


    Tambahkan konfigurasi yang dikehendaki dengan cara menambahkan atribut
    data-nama-konfigurasi='Nilai' pada elemen UL.

    Contoh: 
            
<ul data-marker-icon='check' data-marker-box='circle'>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
    • Item 1
    • Item 2
    • Item 3


    Secara default, skin untuk masing-masing icon telah terdefinisi secara berbeda. Anda bisa mengganti warna icon default melalui konfigurasi marker-skin. 

            
<b>Custom skin tanpa marker-box</b>
<ul data-marker-icon='check' data-marker-box='none' data-marker-skin='blue'>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<br/>
<br/>
<b>Custom skin dengan marker-box</b>
<ul data-marker-icon='check' data-marker-box='circle' data-marker-skin='blue'>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
    Custom skin tanpa marker-box
    • Item 1
    • Item 2
    • Item 3


    Custom skin dengan marker-box
    • Item 1
    • Item 2
    • Item 3


  2. Pembuatan elemen OL (daftar dengan nomor)
    Prosedur penambahan konfigurasi sama halnya dengan elemen UL sebelumnya. Hanya saja, untuk elemen OL, konfigurasi marker-icon tidak tersedia. Marker untuk elemen OL akan selalu berupa Nomor. 

            
<ol data-marker-box='circle' data-marker-skin='blue'>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

    1. Item 1
    2. Item 2
    3. Item 3

Komentar