Belajar Materialize #9 : Card pada Materialize

Belajar Materialize #9 : Card pada Materialize – Halo sahabat kodingin, sampai jumpa kembali tutorial belajar Materialize menggunakan Bahasa Indonesia.

Pada kesempatan ini saya akan membahas lanjutan seri “panduan belajar materialize” untuk membuat halaman website yang keren yaitu “cara menggunakan card pada Materialize”.

Ketika anda membuka halaman website pasti pernah menemui suatu bentuk postingan yang tampilannya kotak-kotak, entah itu kecil atau besar. Nah itu contoh salah satu penggunaan card.

Card pada Materialize

Card Materialize adalah satu salah komponen pada materialize. Ada 7 macam-macam komponen selector CSS card yaitu card-content, card-image,card-action, card-reveal, card stacked dan card-tab, serta card-panel. Selain itu card memiliki garis pada sisi luar dan memiliki ukuran jarak dalam / padding dan jarak luar /margin.

Untuk menggunakan card pada materalize biasanya di bungkus menggunakan grid materialize dan class dengan nama row. Sebelumnya materi tentang grid sudah saya bahas di Belajar Materialize #4 : Cara Menggunakan Sistem Grid Materialize. Silahkan anda pelajari jika anda belum mengerti “cara menggunakan grid sistem pada materialize”.

Lalu, Bagaimana cara “membuat card pada materialize” ?

Mari kita bahas….

Cara Membuat Card pada Materialize

Untuk membuat card dapat menggunakan class .card kemudian di dalamnya tedapat class dengan nama .card-content.

Sebagai contoh, kali ini saya akan membuatkan card yang standar yang meliputi text dan suatu aksi.

Berikut ini contoh membuat card pada materialize.

Perhatikan kode diatas, pertama saya menggunaka class container agar ukuran layar 70%, kemudian saya memberi class .row, setelah itu saya memberikan grid dengan ukuran 6.

Di dalam Grid terdapat class card yang berisi text judul, teks isi dan teks aksi. Penggunaan judul card berbeda dengan di boostrap yang tedapat di class .header, di materialize teks judul berada di konten.

Silahkan buka kode diatas di browser, dan lihat hasilnya seperti gambar di bawah ini.

Cara Membuat Card pada Materialize
Cara Membuat Card pada Materialize

Perhatikan gambar di atas, tedapat dua card, sesuai dengan kode yang saya tuliskan diatas dan dibungkus dalam komponend grid.

Card Menggunakan Gambar

Di dalam komponen card juga dapat di berikan gambar, gambar bisa berasal dari internal local komputer anda atau gambar yang berasal dari cloud secara online.

Jika anda belum tahu bagaimana cara menampilkan gambar dengan materialize dapat membaca tutorial Belajar Materialize #8 : Media pada Materialize.

Berikut ini contoh membuat card menggunakan gambar.

Jika di buka pada halaman browser tampilannya seperti pada gambar di bawah ini

Card diatas di bagi mejadi 3 dengan grid sistem dengan ukuran 4 sehingga gambar akan menyesuaikan dengan grid dan card yang telah ditentukan.

Penggunaan card di atas juga responsive di semua device, ketika di buka disalah satu device maka ukuran nya akan menyesuaikan terhadap sistem grid.

Membuat Horizontal Card

Horizontal card pada materialize merupakan tampilan layout pada card yang berbentuk mengarah ke ke kanan. Jika tutorial di atas berbentuk horizontal maka tutorial ini membahas cara menampilkan dengan layout horizontal.

Yang di maksud horizontal merupakan horizontal pada isi yang ada di dalam card.

Berikuut ini contoh membuat card horizontal.

Jika di buka di halaman browser maka hasilnya sepertii gambar di bawah ini.

Membuat Horizontal Card
Membuat Horizontal Card

Perhatikan gambar di atas, gambar yang ada di dalam grid terdapat di sisi kiri sebelum teks dan teks berapa di sisi kanan gambar.

Memberikan Warna pada Card Materialize

Selain dapat menggunakan gambar, card juga dapat di berikan warna sesuai selera anda, misalnya anda menyukai latar biri maka anda dapat mengubahnya.

Untuk membuat card yang berwarna saya akan menggunakan kode sebelumnya menggunakan layout card horizontal.

Berikut ini contoh kode memberikan warna pada Card Materialize.

Perhatikan gambar di atas, saya memberikan latar belakang dengan warna hijau dan biru menyerupai grey yang di tandai pada class .teal dan .blue-grey.

Selain itu saya juga memberikan class pada teks agar warna menjadi putih, ditandai dengan class .white-text.

Keika di jalankan di halaman browser maka hasilnya seperti gambar di bawah ini.

Memberikan Warna pada Card Materialize
Memberikan Warna pada Card Materialize

Perhatikan gambar diatas, latar belakang sudah tidak berwarna putih lagi namun berubah dengan warna yang kita inginkan sesuai kode di atas.

Card menggunakan Panel

Card panel pada materialize berbentuk hanya sebuah kotak yang sederhana, panel sangat cocok untuk menampilkan informasi yang sederhana, seperti pengumuan tertentu.

Berikut ini contoh kode membuat panel card materialize

Perhatikan kode diatas, saya membuat 2 panel dengan warna latar teal / hijau dan grey, silahkan buka di browser anda atau jalankan, maka hasilnya akan seperti gambar di bawah ini.

Card menggunakan Panel
Card menggunakan Panel

Perhatikan gambar di atas, terlihat ada 2 panel yang keren.

Kesimpulan…

Ada 7 bentuk class card yang dapat digunakan pada framework materialize, berbagai varian akan membuat tampilan website yang anda buat terlihat lebih menarik.

Perlu di perhatikan penggunaan card akan lebih indah jika dibungkus dengan sistem grid, hal ini akan membuat tampilannya terlihat tapi dan responsive di semua device.

Cukup mudah bukan “membuat card di materialize”.

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.
Leave a Reply