Terwujud - Kerangka Kerja Desain CSS Material

Google Desain Bahan ditujukan untuk bekerja dengan baik di Web dan juga pada aplikasi seluler. Ini mendapatkan popularitas dengan pengembang dan jika Anda ingin mengadopsinya juga, ada banyak cara untuk mengimplementasikan Desain Material di situs Anda. Anda bisa menggunakan Polymer atau Angular, atau Anda bisa menggunakan Materialize.

Wujud adalah a Kerangka kerja CSS berdasarkan prinsip Desain Material dengan dukungan Sass untuk pengembangan yang lebih baik. Itu membawa styling standar untuk mudah digunakan, dan memiliki dokumentasi rinci.

Anda dapat menemukan banyak komponen yang berguna di dalam: dialog, modal, pemilih tanggal, tombol material, paralaks, kartu, dan lainnya. Ini juga memiliki banyak opsi navigasi yang dapat Anda pilih, seperti drop down, slide dalam menu dan tab. Terwujud juga menggunakan a Sistem 12-grid dengan 3 kueri ukuran layar media standar: lebar maksimal 600px adalah perangkat seluler, perangkat tablet 992px dan lebih dari 992px dianggap sebagai perangkat desktop.

Mulai

Ada dua cara untuk memulai dengan Materialize: gunakan CSS standar atau Kelancangan. Kedua sumber dapat diunduh di sini. Anda juga bisa mendapatkannya dengan bower menggunakan perintah berikut:

 menginstal bower terwujud 

Setelah Anda mendapatkan sumber, pastikan untuk menautkannya dengan benar pada file proyek Anda atau kompilasi sumber jika Anda menggunakan versi Sass.

fitur

Di bagian ini, saya akan menjelaskan beberapa fitur yang ditawarkan Materialize.

1. Sass Mixins

Kerangka kerja ini membawa Sass Mixins yang secara otomatis menambahkan semua awalan peramban saat Anda menulis properti CSS tertentu. Ini adalah fitur hebat yang harus dipastikan kompatibilitas di semua browser, dengan sedikit keributan, dan kode, mungkin.

Lihatlah properti animasi berikut:

 -webkit-animasi: 0,5s; -moz-animation: 0,5s; -o-animasi: 0,5s; -ms-animasi: 0,5s; animasi: 0,5s; 

Baris-baris kode tersebut dapat ditulis ulang dengan satu baris Sass mixin seperti:

 @sertakan animasi (.5s); 

Ada sekitar 19 mixin utama tersedia. Untuk melihat daftar lengkap, buka kategori Sass di CAMPURAN tab.

2. Teks Arus

Sementara kerangka kerja frontend lainnya menggunakan teks tetap, Materialize mengimplementasikan teks yang benar-benar responsif. Ukuran teks dan tinggi garis juga diskalakan untuk menjaga keterbacaan. Ketika datang ke layar yang lebih kecil, tinggi garis diskalakan lebih besar.

Untuk menggunakan Teks Alur, Anda cukup menambahkan teks mengalir kelas pada teks yang Anda inginkan. Contohnya:

 
Ini adalah Teks Aliran.
 

Lihat demo di sini di bagian Teks Alir.

3. Efek riak dengan Gelombang

Desain Material juga dilengkapi dengan umpan balik interaktif, salah satu contoh penting adalah efek riak. Dalam Materialize, efek ini disebut Ombak. Pada dasarnya ketika pengguna mengklik atau mengetuk / menyentuh tombol, kartu atau elemen lainnya, efeknya muncul. Gelombang dapat dengan mudah dibuat dengan menambahkan efek gelombang kelas ke elemen Anda.

Cuplikan ini memberi Anda efek gelombang.

 Menyerahkan 

Riak berwarna abu-abu secara default. Tetapi dalam situasi di mana Anda memiliki latar belakang warna gelap, Anda mungkin ingin mengubah warnanya. Untuk menambahkan warna yang berbeda, cukup tambahkan gelombang- (warna) ke elemen. Ganti "(warna)" dengan nama warna.

 Menyerahkan 

Anda dapat memilih dari 7 warna: terang, merah, kuning, oranye, ungu, hijau dan hijau. Anda selalu dapat membuat atau menyesuaikan warna Anda sendiri jika warna-warna itu tidak sesuai dengan kebutuhan Anda.

4. Bayangan

Untuk menghadirkan hubungan antar elemen, Desain Bahan merekomendasikan penggunaan ketinggian pada permukaan. Wujudkan mewujudkan prinsip ini dengan z-depth- (angka) kelas. Anda dapat menentukan kedalaman bayangan dengan mengubah (angka) dari 1 menjadi 5:

 
 
Kedalaman bayangan 3
  
 

Semua kedalaman bayangan ditunjukkan dengan gambar di bawah ini.

5. Tombol dan Ikon

Dalam Desain Bahan ada tiga jenis tombol utama: tombol terangkat, hebat (tombol aksi mengambang) dan tombol datar.

(1) Tombol dinaikkan

Tombol terangkat adalah tombol default. Untuk membuat tombol ini, cukup tambahkan a btn kelas ke elemen Anda. Jika Anda ingin memberikan efek gelombang ketika diklik atau ditekan, lanjutkan dengan ini:

 Tombol 

Atau, Anda juga dapat memberikan tombol ikon di sebelah kiri atau kanan teks. Untuk ikon, Anda perlu menambahkan custom tag dengan ikon nama dan posisi kelas. Contohnya:

 Unduh 

Dalam cuplikan di atas kita gunakan mdi-file-file-unduh kelas untuk ikon unduhan. Ada sekitar 740 ikon berbeda kamu bisa memakai. Untuk melihatnya, buka halaman Sass di tab Ikon.

(2) Tombol mengambang

Tombol mengambang dapat dibuat dengan menambahkan btn-mengambang kelas dan ikon yang Anda inginkan. Contohnya:

Dalam Desain Bahan, tombol datar sering digunakan dalam kotak dialog. Untuk membuatnya, cukup tambahkan btn-flat ke elemen Anda seperti:

 Menurun 

Selain itu, tombol dapat dinonaktifkan dengan cacat kelas dan dibuat menggunakan lebih besar btn-besar kelas.

6. Kisi

Terwujud menggunakan standar Kotak responsif 12 kolom sistem. Daya tanggap dibagi menjadi tiga bagian: kecil untuk seluler, sedang untuk tablet dan besar (l) untuk desktop.

Untuk membuat kolom, gunakan s, m atau l untuk menunjukkan ukuran, diikuti oleh nomor kisi. Misalnya, ketika Anda ingin membuat tata letak setengah ukuran untuk perangkat seluler maka Anda harus menyertakan s6 kelas ke dalam tata letak Anda. s6 berdiri untuk kecil-6 yang berarti 6 kolom pada perangkat kecil.

Anda juga harus memasukkan a col kelas dalam tata letak yang Anda buat dan letakkan di dalam elemen yang memiliki baris kelas. Ini agar tata letak dapat dimasukkan ke dalam kolom dengan benar. Ini sebuah contoh:

 
 
Saya memiliki 12 kolom atau lebar penuh di sini
 
4-kolom (sepertiga) di sini
 
4-kolom (sepertiga) di sini
 
4-kolom (sepertiga) di sini
 
 

Inilah hasilnya:

Secara default, col s12 adalah ukuran tetap dan dioptimalkan untuk semua ukuran layar, pada dasarnya sama dengan col s12 m12 l12. Tetapi jika Anda ingin menentukan ukuran kolom untuk perangkat yang berbeda. Yang perlu Anda lakukan adalah mendaftar ukuran tambahan seperti:

 
 
Lebar saya selalu memiliki 12 kolom di mana-mana
 
Saya memiliki 12 kolom di ponsel, 6 di tablet, dan 9 di desktop
 
 

Begini tampilannya:

Itu hanya beberapa fitur dari Materialize. Untuk mempelajari lebih lanjut tentang fitur-fitur lainnya, buka halaman dokumentasi.