Belajar Materialize #21 : Collapsible pada Materialize

Collapsible pada Materialize – Halo “sahabat kodingin” , apa kabar ? semoga anda semua dalam keadaan baik. Saya ucapkan selamat datang pada seri tutorial yang membahas framework CSS. Kita masih membahas mengenai tutorial belajar materialize.

Collapsible pada Materialize

Pada Tutorial materialize kali ini akan membahas “callapsible pada Materialize”.

Collapsible ini biasanya banyak digunakan di halaman website untuk membuat sebuah studi kasus pertanyaan dan pernyataan ataupun judul yang memiliki konten deskripsi panjang.

Sebelum lebih jauh, kita harus tahu dulu tentang “apa itu collapsible materialize ?”

Pengertian Collapsible pada Materialize

Collapsible adalah salah satu komponen javascript dari materialize, Fitur ini digunakan untuk melakukan show dan hidden konten. Jika di terjemahkan yaitu membuka dan menutup konten.

Dengan menggunakan collpasible akan “membuat konten pada website” kita terlihat lebih rapi dan minimalis tapi mempunyai konten yang lengkap.

Cara membuat collapsible dengan materialize

Materialize sudah menyediakan method javascipt dan class yang digunakan untuk membuat collapsible. Jadi kita tidak perlu di pusingkan lagi membuat fungsi yang panjang.

Inisiasi class HTML terdapat fungsi pada javascript dapat dilakukan dengan javascript murni maupun dengan Jquery.

Namun pada Tutorial kali ini saya akan menggunakan Jquery untuk menggunakan collapsible dengan materialize.

Yuk langsung saja kita buat contohnya.

Perhatikan kode diatas, saya menggunakan class collapsible dan kodingin. Class collapsible digunakan agar tampilannya sesuai dengan style CSS yang di buat materialize.

Sedangkan untuk class kodingin untuk mendifiniskan agar mengacu pada method di javascript collpasible.

Tujuan saya menggunakan 2 class agar anda tidak bingung tujuan terhadap class yang digunakan. Anda juga dapat membuat satu class dengan nama .collapsible. Itu semua tergantung pilihan masing-masing pengguna.

Silahkan anda pilih yang mana.

Sekarang mari kita lihat hasilnya….

Belajar Materialize #21 : Collapsible pada Materialize
Cara membuat collapsible dengan materialize

Perhatikan gambar di atas, terlihat sebuah menu dapat di buka dan di tutup, sehingga membuat konten terlihat lebih minimalis.

Oh ya, pada menu tersebut saya menggunakan icon dari google material. Icon yang terletak pada kiri teks.

Kira juga dapat membuat salah satu konten terbuka ketika pertama kali membuat, cara nya dengan menambahkan class .active.

Contohnya seperti potongan kode berikut ini.

Di dalam list dapat anda masukkan konten yang ingin di buat terbuka / konten terlihat ketika membuat pertama kalinya.

Tipe collapsible pada Materialize

Terdapat 3 tipe collapsible yang dapat digunakan, yaitu Accordion, Expandable dan Pop Out. Ketika tipe collapsible mempuunyai varian yang berbeda.

Salah satu contoh yang kita gunakan sebelumnya yaitu menggunakan tipe according.

Yuk kita bahas satu per satu tentan tipe collapsible pada materialize.

1. Accordion

Accordion adalah tipe collapsible dimana jika salah satu konten di buka maka yang lain akan menutup. Sehingga hanya dapat mengaktifkan satu saja.

2. Expandable

Expandable adalah tipe collapsible kealikan dari acordian yaitu dapat membuka semua konten yang ada.

3. Popout

Popout adalah tipe collapsible dengan varian ketika di buka akan menampilkan tampilan yang membedar / zoom, sehingga terlihat lebih besar dari yang lainnya. Selain itu juga terdapat efek bayangan.

Berikut ini contoh kode menggunakan 3 jenis collapsible materialize.

Untuk membuat tipe collapsible accordian kita tidak perlu menambahkan class apapun, sedangkan untuk menggunakan tipe pop out harus menambahkan class .popout. Selain itu untuk menggunakan tipe expandable dapat menggunakan class .expandable.

Sekarang mari kita lihat hasilnya.

Belajar Materialize #21 : Collapsible pada Materialize
Tipe collapsible pada Materialize

Perhatikan gambar di atas, terdapat 3 tipe collapsible dengan varian yang berbeda-beda.

Keismpulan…

Collapsible digunakan untuk menghemat tampilan terhadap konten pada halaman website dan terlihat sangat minimalis namun lengkap.

Terdapat 3 tipe collapsible yang mempunyai variasi yang berbeda. Untuk menggunakan collapsible harus menggunakan Jquery atau javascript murni. Jquery digunakan sebagai acuan class yang telah di definisikan.

Baca Juga….

One comment

  1. […] akan akan meneruskan seri ke 21 yang berjudul Cara Menggunakan Collapsible pada Materialize, Sekarang kita akan membahas komponen teks input pada […]

Leave a Reply