Bahan Theming: Membuat Bahan Anda Sendiri!

Landskap yang sentiasa berkembang itu memerlukan bakat kreatif dan reka bentuk yang cekap dan berskala. Produk teratas kini bergantung kepada sistem reka bentuk yang mantap untuk mengekalkan koheren jenama sambil mengutamakan kebolehcapaian dan pengalaman pengguna. Reka bentuk bahan, sistem reka bentuk Google, menjembatani jurang antara ekspresi kreatif dan pembangunan sistematik.

Pada mulanya, reka bentuk bahan tidak mempunyai fleksibiliti untuk menyatakan sepenuhnya identiti jenama individu. Maklum balas menyerlahkan dua bidang utama untuk penambahbaikan: Kesesuaian gaya terhad dan alat yang tidak mencukupi untuk pelaksanaan jenama yang sistematik.

Diperkenalkan di Google I/O 2018, keupayaan bertemakan Bahan Reka Bentuk menangani kebimbangan ini. Theming memberi kuasa kepada pereka dan pemaju untuk memanfaatkan kekuatan bahan sambil menyesuaikan penampilannya. Ini melibatkan penyesuaian warna, tipografi, dan bentuk untuk mencipta pengalaman jenama yang unik.

Siaran ini memberi tumpuan kepada penangkapan web menggunakan CSS (khususnya, SCSS). Mari kita gambarkan dengan templat log masuk asas yang dibina dengan komponen web bahan.

Theming dijelaskan

Reka bentuk bahan peringatan membolehkan pelarasan global untuk warna, tipografi, dan bentuk, memberi kesan kepada semua komponen. Walaupun seolah -olah terhad, pelarasan ini secara signifikan mengubah rasa keseluruhan reka bentuk.

Penyesuaian warna

Material.io menyediakan pemetik warna untuk membantu pemilihan warna dan pemeriksaan kontras. Menggunakan SCSS, kita boleh mengubah suai penampilan skrin log masuk dengan mudah:

 $ MDC-Theme-Primary: #26418F;
$ MDC-Theme-Secondary: #D1C4E9;
$ MDC-Theme-Background: #fdf6f9;

Bahan secara automatik menetapkan $mdc-theme-on-primary to White untuk aksesibiliti. Anda boleh mengatasi warna teks dengan $mdc-theme-on-primary dan $mdc-theme-on-secondary .

Pelarasan tipografi

Bahan menyediakan skala tipografi asas yang disesuaikan melalui tema. Tipografi boleh diselaraskan untuk setiap tahap tajuk menggunakan kelas CSS atau campuran. Kami akan menggunakan font Google untuk kemudahan:

 @import url ('https://fonts.googleapis.com/css?family=josefin sans');
$ mdc-typography-font-family: unquote ("Josefin Sans, Sans-Serif");

$ mdc-typography-styles-button: (
 saiz font: 14px,
 Font-Weight: 600,
 Surat-Spacing: 0.05em,
);

Bentuk pengubahsuaian

Bentuk penyesuaian mengubah radii sudut komponen (butang, kad, lembaran). Bahan membolehkan bentuk yang berbeza di pelbagai sudut dan saiz komponen. Contohnya:

 $ MDC-Shape-Small-Component-Radius: 12px 4px;
$ MDC-Shape-Large-Component-Radius: 8px;

Dengan hanya beberapa baris kod, kami telah mengubah aplikasi secara dramatik.

Lepaskan kreativiti anda

Banyak kombinasi warna, tipografi, dan bentuk wujud untuk mewujudkan identiti jenama yang tersendiri. Contoh -contoh di bawah mempamerkan pelbagai aplikasi unsur -unsur ini menggunakan komponen bahan.

Contoh dunia nyata

Google sendiri menggunakan komponen bahan yang disesuaikan (Tema Bahan Google) merentasi produk seperti Gmail, Google News, dan Google Play. Syarikat -syarikat lain, seperti Lyft dan Anchor, juga memanfaatkan fleksibiliti reka bentuk bahan untuk mencipta pengalaman jenama yang unik.

Bermula

Mulailah membina tema bahan anda menggunakan kit starter bahan dan projek "membina tema material". Eksperimen dengan pembolehubah SCSS untuk menyesuaikan komponen. Cukup tampal pembolehubah ini ke dalam fail my-theme.scss anda dan mula membina.

Pendek kata: Keupayaan bertemakan reka bentuk bahan menawarkan fleksibiliti yang belum pernah terjadi sebelumnya. Mula meneroka hari ini!

Atas ialah kandungan terperinci Bahan Theming: Membuat Bahan Anda Sendiri!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!