Component: Listbox, Accordian

Di dalam bootstrap terdapat banyak componen, pada topik ini yang akan dibahas adalah cara menampilkan data dengan menggunakan class listbox, accordian,

Membuat List-group dan Accordian

List-group

  • Jalankan program Brackets, pilih menu open folder dan buka folder tempat anda bekerja
  • pilih menu File, new dan simpan dengan nama listgroup.css
    • isi ketikan css seperti kode dibawah ini
.kiri, .kanan {
  padding-top: 20px;
  height: 1200px;
  color: white;
  font-size: 20px;
}
.kiri {
  background-color: #53777A;
}
.kanan {
  background-color: #C02942;
}
  • pilih menu File, new dan simpan dengan nama listgroup.html
  • seperti langkah pada praktek sebelumnya buat dokumen html standard bootstrap dengan menggunakan emmet
  • beberapa kata kunci emmet:
    • ! (tanda seru)
    • meta:vp
    • link (arahkan ke 3 css, bootstrap, font-awesome, listgroup.css)
    • script:src (arahkan ke 2 file js yaitu jquery dan bootstrap)
  • pada bagian isi ketik
    • ketik perintah emmet berikut:
    • div.row>div.container-fluid , tekan tab
    • div.col-sm-8.kiri+div.col-sm-3.col-sm-offset-1.kanan , tekan tab
    • sehingga menjadi potongan kode seperti dibawah ini
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-8 kiri">
            ...
        </div>
        <div class="col-sm-3 col-sm-offset-1 kanan">
            ...
        </div>
    </div>
</div>
  • pada html bagian kiri
    • div.list-group
    • (a.list-group-item>(span.fa.fa-envira)+{text}+(span.label.label-info.pull-sm-right{000}))*4
    • Lakukan modifikasi isi sehingga dapat menampilkan yang berbeda
<h3>List Group</h3>
<div class="list-group">
    <a href="" class="list-group-item">
        <span class="fa fa-money"></span>
        Money
        <span class="label label-info pull-sm-right">30</span>
    </a>
    <a href="" class="list-group-item">
        <span class="fa fa-hand-o-down"></span>
        hand o down
        <span class="label label-info pull-sm-right">20</span>
    </a>
    <a href="" class="list-group-item">
        <span class="fa fa-gitlab"></span>
        Git lab
        <span class="label label-info pull-sm-right">10</span>
    </a>
    <a href="" class="list-group-item">
        <span class="fa fa-firefox"></span>
        Firefox
        <span class="label label-warning label-pill pull-sm-right">100</span>
    </a>
</div>
  • Penjelasan
    • pada contoh diatas merupakan gabungan dari beberapa component
    • list-group, hyperlink, icon dan label
    • untuk setiap item terdapat 4 fungsi yaitu:
    • tag a (hyperlink) yang artinya bila di klik akan membuka halaman web lain.
    • gambar icon dengan class font awesome
    • tulisan
    • label
    • perhatikan tag pull-sm-right artinya label akan ditarik rata ke kanan

Membuat accordion

  • pada html bagian kanan
    • lakukan copy-paste kode berikut:
<!-- accordion -->
 <div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <button data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="btn btn-success">
          Judul 1 <i class="fa fa-angle-double-right"></i>
        </button>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      data 
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          judul 2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      data 2
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          judul 3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      data 3
    </div>
  </div>
</div>
<!--   end accordion -->

  • Penjelasan

    • kunci dari accordian adalah bahwa setiap bagian accordian terdiri dari 2 bagian yaitu judul dan data
    • penghubung antar keduannya adalah pada bagian href dan id
    • contohnya pada bagian judul 3 terdapat href="#collapseThree"
    • pada bagian data menggunakan id="collapseThree"
    • jadi apabila anda ingin memiliki lebih dari tiga menu, maka langkah yang anda lakukan
    • copy satu bagian dari panel panel-default
    • kemudian ubah href pada bagian judul dan id pada bagian data yang menjadi penghubung

  • hasil dari praktek kita untuk component ini tampak seperti gambar berikut: