Materialis - Rangka Kerja CSS Reka Bentuk Bahan
Google Reka Bentuk Bahan bertujuan untuk berfungsi dengan baik di Web dan juga aplikasi mudah alih. Ia semakin terkenal dengan pemaju dan jika anda mahu menggunakannya juga, terdapat banyak cara untuk melaksanakan Design Material di laman web anda. Anda boleh menggunakan Polimer atau Sudut, atau anda boleh menggunakan Materialize.
Materialis adalah a Rangka kerja CSS berdasarkan prinsip Reka Bentuk Bahan dengan sokongan Sass untuk pembangunan yang lebih baik. Ia membawa gaya lalai untuk kegunaan mudah, dan mempunyai dokumentasi terperinci.
Anda boleh menemui banyak komponen berguna dalam: dialog, modal, pemilih tarikh, butang bahan, paralaks, kad dan banyak lagi. Ia juga mempunyai banyak pilihan navigasi yang boleh anda pilih, seperti drop down, slaid dalam menu dan tab. Memproses juga menggunakan a Sistem 12-grid dengan 3 pertanyaan media saiz lalai: lebar maksimum 600px adalah peranti mudah alih, peranti tablet 992px dan lebih daripada 992px dianggap peranti desktop.
Bermula
Terdapat dua cara untuk bermula dengan Materialize: use standard CSS atau Sass. Kedua-dua sumber boleh dimuat turun di sini. Anda juga boleh mendapatkannya dengan menggunakan perintah berikut:
bower install materialize
Setelah anda mendapatkan sumber, pastikan untuk menghubungkannya dengan betul pada fail projek anda atau menyusun sumber jika anda menggunakan versi Sass.
ciri-ciri
Dalam bahagian ini, saya akan menerangkan beberapa ciri yang menawarkan Materialize.
1. Sass Mixins
Rangka kerja ini membawa Sass Mixins yang secara automatik menambah semua awalan pelayar apabila anda menulis sifat CSS tertentu. Ia adalah ciri yang hebat untuk memastikan keserasian merentas semua pelayar, dengan sedikit kekecohan, dan kod, mungkin.
Lihatlah ciri-ciri animasi berikut:
-webkit-animation: 0.5s; -moz-animasi: 0.5s; -o-animasi: 0.5s; -ms-animasi: 0.5s; animasi: 0.5s;
Barisan kod tersebut boleh ditulis semula dengan satu garisan campuran Sass seperti:
@include animasi (.5s);
Terdapat kira-kira 19 campuran utama boleh didapati. Untuk melihat senarai penuh, pergi ke kategori Sass di MIXINS tab.
2. Aliran Teks
Walaupun rangka kerja frontend lain menggunakan teks tetap, materialize menerapkan teks yang benar-benar responsif. Saiz teks dan ketinggian baris juga berskala responsif untuk mengekalkan kebolehbacaan. Apabila ia datang kepada skrin yang lebih kecil, ketinggian baris dikecilkan lebih besar.
Untuk menggunakan Teks Aliran, anda boleh menambahnya aliran-teks kelas pada teks yang anda inginkan. Sebagai contoh:
Ini adalah Teks Aliran.
Lihat demo di sini pada bahagian Teks Aliran.
3. Kesan riak dengan Gelombang
Reka bentuk Bahan juga dilengkapi dengan maklum balas interaktif, satu contoh penting ialah kesan riak. Dalam mematerialisasikan, kesan ini dipanggil Gelombang. Pada dasarnya apabila pengguna mengklik atau mengetuk / menyentuh butang, kad atau elemen lain, kesannya muncul. Gelombang boleh dibuat dengan mudah dengan menambah kesan gelombang kelas ke elemen anda.
Coretan ini memberi anda kesan gelombang.
Hantar
Ripples adalah kelabu secara lalai. Tetapi dalam keadaan di mana anda mempunyai latar belakang warna gelap, anda mungkin mahu menukar warna. Untuk menambah warna yang berbeza, tambahkan sahaja ombak- (warna) kepada elemen. Gantikan "(warna)" dengan nama warna.
Hantar
Anda boleh memilih dari 7 warna: cahaya, merah, kuning, oren, ungu, hijau dan kecil. Anda sentiasa boleh membuat atau menyesuaikan warna anda sendiri jika warna-warna itu tidak sesuai dengan keperluan anda.
4. Shadow
Untuk menyampaikan hubungan antara elemen, Reka Bentuk Bahan mengesyorkan menggunakan ketinggian pada permukaan. Memaksimumkan menyampaikan prinsip ini dengannya z-depth- (nombor) kelas. Anda boleh menentukan kedalaman bayang-bayang dengan menukar nombor (nombor) dari 1 hingga 5:
Kedalaman bayang-bayang 3
Semua kedalaman bayang-bayang menunjukkan dengan imej di bawah.
5. Butang dan Ikon
Dalam Reka Bentuk Bahan terdapat tiga jenis butang utama: butang dibangkitkan, fab (butang tindakan terapung) dan butang rata.
(1) Butang dibangkitkan
Butang yang dibangkitkan adalah butang lalai. Untuk membuat butang ini, tambah sahaja btn kelas kepada elemen anda. Jika anda ingin memberikan kesan gelombang apabila diklik atau ditekan, pergi dengan ini:
Butang
Sebagai alternatif, anda juga boleh memberikan butang ikon ke kiri atau kanan teks. Untuk ikon, anda perlu menambah adat tag dengan nama dan kedudukan kelas ikon. Sebagai contoh:
Muat turun
Dalam coretan di atas yang kami gunakan mdi-file-file-download kelas untuk ikon muat turun. Terdapat kira-kira 740 ikon yang berbeza anda boleh gunakan. Untuk melihat mereka menuju ke halaman Sass dalam tab Ikon.
(2) Butang terapung
Butang terapung boleh dibuat dengan menambahkan btn-terapung kelas dan ikon yang anda inginkan. Sebagai contoh:
Dalam Reka Bentuk Bahan, butang rata sering digunakan dalam kotak dialog. Untuk menciptanya, tambahkan sahaja btn-flat kepada elemen anda seperti itu:
Tolak
Selain itu, butang boleh dimatikan dengan kurang upaya kelas dan dibuat lebih besar menggunakan btn-besar kelas.
6. Grid
Materialis menggunakan standard 12-kolom grid responsif sistem. Tanggapan ini dibahagikan kepada tiga bahagian: kecil untuk mudah alih, sederhana (m) untuk tablet dan besar (l) untuk desktop.
Untuk membuat lajur, gunakan s, m atau l untuk menunjukkan saiz, diikuti dengan nombor grid. Sebagai contoh, apabila anda ingin membuat susunatur separuh bersaiz untuk peranti mudah alih maka anda harus menyertakan s6 kelas ke dalam susun atur anda. s6 singkatan kecil-6 yang bermaksud 6 lajur pada peranti kecil.
Anda juga mesti menyertakan a col kelas dalam susun atur yang anda buat dan letakkan di dalam elemen yang mempunyai baris kelas. Ini begitu susun atur boleh dimasukkan ke dalam lajur dengan betul. Contohnya:
Saya mempunyai 12 lajur atau lebar penuh di sini4-lajur (satu pertiga) di sini4-lajur (satu pertiga) di sini4-lajur (satu pertiga) di sini
Inilah hasilnya:
Secara lalai, col s12 adalah saiz tetap dan dioptimumkan untuk semua saiz skrin, pada dasarnya sama seperti col s12 m12 l12. Tetapi jika anda mahu menentukan saiz untuk lajur untuk peranti yang berbeza. Apa yang perlu anda lakukan ialah menyenaraikan saiz tambahan seperti itu:
Lebar saya sentiasa mempunyai 12 tiang di mana-manaSaya mempunyai 12 lajur di telefon bimbit, 6 di tablet dan 9 di desktop
Inilah yang kelihatan seperti ini:
Mereka hanya beberapa ciri Materialis. Untuk mengetahui lebih lanjut mengenai ciri-ciri lain mereka, pergi ke halaman dokumentasi.
