Belajar Materialize #19 : Tabs pada Materialize

Belajar Materialize #19 : Tabs pada Materialize – Halo “sahabat kodingin” berjumpa lagi pada seri tutorial belajar materialize bahasa Indonesia.

Tabs pada Materialize

Pada seri tutorial ke – 19 ini akan membahas cara membuat tabs pada materialize. Untuk menggunakan tabs pada materialize dapat di lakukan dengan menggunakan class yang ada di materialize.

Sudah paham apa itu “Tabs pada Materialize” ?

Sebelum cara menggunakan tabs pada materialize sebaiknya pahami dulu tentang “pengertian tabs materialize”.

Pengertian Tabs pada Materialize

Tabs adalah sebuah menu yang berupa link, ketika link tersebut akan langsung menuju konten yang di inginkan. Artinya tidak perlu melakukan loading menggunakan protokol http.

Dengan menggunakan tabs maka akan lebih cepat mendapatkan konten yang di inginkan karena tidak memerlukan loading pada halaman browser.

Cara Membuat Tabs pada Materialize

Membuat tabs di materialize menggunakan class .tabs untuk menampilkan link yang di inginkan, namun tetap di definisikan pada Jquery. Bukan hanya class. tabs, kita juga dapat memberikan nama class sesuai keinginan kita.

Sebenarnya cara kerjanya mirip dengan CSS ketika link menuju ke elemen Id Css,

Jadi tujuan link tersebut menuju ke konten yang elemen CSS sama. Sebagai contoh kita punya div dengan id home, maka link nya yaitu

Namun…

Di materialize konten pada elemen div tidak di munculkan, akan di munculkan ketika ada link yang menuju Id pada konten.

Sampai disini semoga anda paham.

Langsung saja kita buat tabs sederhana.

Berikut ini contoh kode menggunakan tabs pada materialize.

Perhatikan kode di atas, terdapat 4 link, dimana 3 link dapat digunakan dan satu link tidak dapat di klik.

Link tersebut menuju ke elemen div HTML menggunakan anchor / link. Jadi link pada anchot text meuju ke selector id yang sama.

Sekarang kita lihat hasilnya.

Cara Membuat Tabs pada Materialize
Cara Membuat Tabs pada Materialize

Perhatikan gambar di atas, ketika kita mengklik salah satu menu maka tidak terdapat reload pada browser yang di gunakan.

Menggunakan Method pada Tabs Materialize

Method ini digunakan untuk kebutuhan untuk memodifikasi default tabs materialize. Ada 4 jenis method method yang dapat anda gunakan.

Fomat penggunaan seperti method materialize pada umumnya, yaitu dengan memberikan nama method di ikuti dengan nilainya.

Contohnya.

Perhatikan kode di atas, terdapat method dengan nama swipeable dengan nilai true.

Berikut ini pilihan daftar method yang dapat digunakan.

Menggunakan Method pada Tabs Materialize
Menggunakan Method pada Tabs Materialize

Sekarang yuk coba implementasikan cara menggunakan swipe pada materialize.

Membuat Swipeable Tabs pada Materialize

Swipeable tabs merupakan jenis tabs dimana dapat dilakukan dengan metode sentuhan terhadap objek, jadi kita tidak perlu melakukan klik pada link melainkan dengan menggesar elemen.

Salah satu contoh penggunaannya swipe pada aplikasi chat whatsapp, anda dapat menggeser menu ke kanan dan kiri menggunakan sentuhan geser.

Berikut ini contoh membuat swipeable tabs materialize.

Untuk menggunakan swipeable tabs dapat menggunakan method dengan name “swipeable” dengan nilai true. Untuk menujukan link yang telah aktive dapat menggunakan class . active.

Sekarang mari kita lihat hasilnya.

Membuat Swipeable Tabs pada Materialize
Membuat Swipeable Tabs pada Materialize

Perhatikan gambar di atas, saya tidak mengklik menu link yang tersedia melainkan melakukan swipe / menggeser objek kenan maupun ke kiri. Maka hasilnya akan menuju pada elemen sebelumnya ataupun berikutnya.

Kesimpulan…

Tabs merupakan perubahan halaman konten sesuai dengan selector yang kita inginkan, dengan menggunakan tabs maka konten dapat di tampilkan secara cepat.

Bukan hanya dengan menggunakan metode klik untuk memindahkan tabs satu ke yang lainnya melainkan dapat menggunakan swipe / menggeser layout / elemen ke ke kanan maupun ke kiri.

Baca Juga…

Avatar
Didik
Saya Seorang Developer khususnya pada Bidang Website menggunakan Sistem Operasi Linux dan menyukai Pemrograman Website dan System Administrator. Selain itu saya pemilik website kodingin.com.

One comment

  1. […] Belajar Materialize #19 : Tabs pada Materialize […]

Leave a Reply