Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Material Design Lite

Desain Bahan Pembelajaran Lite: Kartu

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Learning Material Design Lite.
Learning Material Design Lite: Text Fields
Learning Material Design Lite: The Menu

Indonesian (Bahasa Indonesia) translation by Ibnukholil (you can also view the original English article)

Kartu dengan cepat menjadi pola UI “kebagian”, khususnya di web seluler. Ini, sebagian, berkat situs web arus utama, seperti Pinterest, Twitter, dan Google Now yang menampilkan banyak kartu. Pada Tuts Anda juga akan menemukan kursus dan pos terbaru di seluruh jaringan di halaman depan menggunakan pola kartu.

Tuts menggunakan kartu untuk menampilkan daftar tentu saja di halaman depan

Dalam tutorial ini, kita akan melihat komponen kartu dalam Material Design Lite (MDL). Menurut spesifikasi bahan Desain, kartu adalah:

"Sepotong kertas dengan data terkait yang unik, yang berfungsi sebagai entry point untuk informasi lebih lanjut.

Kartu dapat berisi teks, Gambar, kombinasi keduanya, dan mungkin juga termasuk komponen MDL lainnya. Dalam konteks web kami umumnya membuat penggunaan kartu antarmuka untuk menampilkan daftar blog posting, Berita, video, produk dan seterusnya.

Seperti biasa dalam seri ini, sebelum kita dapat menerapkan apa pun, kita perlu memuat Perpustakaan MDL — stylesheet dan JavaScript — di kepala dokumen HTML.

Setelah kita memiliki file ini di tempat, kita dapat mulai membangun kartu.

Pergi!

Untuk membuat kartu, kita mulai dengan div dengan kelas mdl-kartu, maka mdl-bayangan--2dp kelas untuk menerapkan bayangan kartu. Mengubah mdl-bayangan--2dp kelas nomor 3, 4, 6, 8, atau 16 untuk meningkatkan kedalaman bayangan dan menyebarkan seperlunya.

Belum, lebar kartu undefined. Kita dapat mengatur lebar melalui CSS diri kita sendiri atau menerapkannya dalam hubungannya dengan komponen grid MDL. Saya akan kartu demo kami untuk menjadi responsif dan terintegrasi dengan ekosistem MDL, sehingga kita akan memilih untuk yang kedua. Kami membungkus mdl-kartu dengan wadah grid dan mengatur kartu itu sendiri sebagai grid sel atau kolom.

Kartu konten

Sekarang kita perlu menentukan konten. Mari kita asumsikan kita ingin menggunakan kartu ini untuk menampilkan posting blog. Secara tradisional, ini mungkin terdiri dari posting fitur gambar, judul posting, kutipan, dan khas "Read More" tombol menunjuk ke isi penuh.

Kita akan mulai dengan judul. Untuk menambahkan satu, buat div kosong dengan mdl-card__titleclass.

Tambahkan judul dalam div dan menerapkan kelas mdl-card__title-teks; tergantung pada struktur halaman Anda dan tingkat konten kartu, Anda dapat menambahkan h1-h6.

Mari kita sekarang menambahkan kutipan posting — Ringkasan isi posting. Untuk itu, kami menciptakan div lain di bawah judul wadah dan menerapkan kelas mdl-card__supporting-teks. Kemudian, bungkus kutipan dengan elemen ayat dan menambahkannya dalam div.

Untuk fitur posting gambar, kita perlu membuat lain berisi elemen (kita akan pergi untuk angka) di atas wadah judul, dengan kelas mdl-card__media. unsur-unsur gambar memiliki beberapa margin yang ditetapkan secara default, jadi mari kita secara manual menimpa itu, seperti:

Akhirnya, Tambahkan gambar.

Secara default, MDL tidak akan merubah ukuran gambar dalam wadah media kartu. Seperti kartu diubah ukurannya, lebar gambar dan tinggi adalah terus-menerus. Wadah media diatur untuk menyembunyikan gambar meluap.

Terakhir, gambar tidak proporsional tinggi, yang tidak membuat kartu tampak hebat.

Kartu ini terlalu tinggi :(

Jika kita ingin gambar untuk mengubah ukuran, mengikuti wadah, sambil menjaga rasio yang, kita akan perlu menambahkan beberapa gaya, pengaturan gambar max-lebar sampai 100%.

Tindakan kartu

Kartu idealnya berisi tindakan yang berkaitan dengan isi kartu. Jika kartu menciak, misalnya, itu mungkin memiliki Retweet dan tombol ikuti. Karena kartu kami digunakan untuk menampilkan posting blog, kita akan menambahkan tombol Read More menunjuk ke isi penuh dari pos, bersama dengan beberapa tombol seperti dan berbagi posting. Kami menambahkan tombol tindakan tersebut di bawah kutipan posting, dibungkus dalam sebuah div baru dengan mdl-card__actions.

Catatan: MDL tidak datang dengan pra-didefinisikan gaya yang mencakup skenario ini mana kita memiliki tiga tombol dalam wadah aksi kartu. Jadi kita perlu menambahkan beberapa lebih banyak gaya untuk menyelaraskan dengan benar tombol ini.

Sekarang, tambahkan beberapa kartu lain untuk membuat daftar posting:

Membungkus

Menampilkan beberapa blog posting adalah salah satu implementasi paling populer kartu antarmuka situs web. Mengatakan bahwa, komponen kartu benar-benar dapat disesuaikan untuk menampilkan semua jenis konten, bahkan berkas tunggal, widget kalender, atau mungkin informasi cuaca.

Beberapa contoh lain dari komponen kartu oleh MDL

Namun, kelas standar dalam spesifikasi komponen tidak termasuk semua gaya untuk skenario tertentu. Bersiaplah untuk menambahkan nama kelas khusus dan beberapa aturan gaya tambahan untuk menyesuaikan tampilan kartu sesuai kebutuhan Anda. Mari kita lihat di komentar apa yang Anda raih!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.