materialize

什么是材料設(shè)計(jì)？ (What is Material Design?)

Material Design is a design language created by Google. According to material.io, Material Design aims to combine:

Material Design是Google創(chuàng)建的一種設(shè)計(jì)語言。 根據(jù)material.io ，Material Design旨在結(jié)合：

…classic principles of good design with the innovation and possibility of technology and science. It aims to develop a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all ?rst-class input methods.…具有創(chuàng)新性和技術(shù)與科學(xué)可能性的優(yōu)秀設(shè)計(jì)經(jīng)典原則。 它旨在開發(fā)一個(gè)單一的基礎(chǔ)系統(tǒng)，以實(shí)現(xiàn)跨平臺和設(shè)備尺寸的統(tǒng)一體驗(yàn)。 移動戒律是最基本的，但是觸摸，語音，鼠標(biāo)和鍵盤都是一流的輸入法。

為什么要使用Material Design？ (Why use Material Design?)

Material Design provides a seamless user experience across all devices. Responsive transitions and animation, along with padding and depth effects such as shadows and lightning, make it feel elegant and user-friendly. Google uses Material Design on almost all its apps (like Keep and Calendar).

Material Design在所有設(shè)備上提供無縫的用戶體驗(yàn)。 響應(yīng)式過渡和動畫以及諸如陰影和閃電之類的填充和深度效果，使其感覺優(yōu)雅且用戶友好。 Google幾乎在其所有應(yīng)用程序(例如Keep和Calendar)上都使用Material Design。

如何在Web應(yīng)用程序中使用Material Design？ (How can you use Material Design in your web apps?)

Materialize is a responsive front-end component library similar to Bootstrap. It offers everything that Bootstrap has to offer, but the difference is that Materialize follows material design principles. Here’s an example template.

Materialize是一個(gè)類似于Bootstrap的響應(yīng)式前端組件庫。 它提供了Bootstrap必須提供的所有內(nèi)容，但不同之處在于Materialize遵循材料設(shè)計(jì)原則。 這是一個(gè)示例模板。

這是Materialize提供的功能列表： (Here’s a list of features that Materialize offers:)

• Grid
  格
• Tables
  桌子
• Badges, buttons, breadcrumbs
  徽章，紐扣，面包屑
• Cards, chips, collections
  卡，籌碼，收藏
• Footer, forms
  頁腳，表格
• Navbar
  導(dǎo)航欄
• And a lot more!
  還有更多！

如何開始 (How to get started)

Unlike Bootstrap, Materialize does not require popper.js. It only requires jQuery. This is all you need to get started. Add this to your HTML and you’ll be good to go!

與Bootstrap不同，Materialize不需要popper.js。 它只需要jQuery。 這就是您開始所需要的。 將此添加到您HTML中，您將一路順風(fēng)！

<!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> <!--Compiled and minifed jQuery --> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

色彩 (Colors)

Using Materialize, you can change the color of any HTML element by simply giving it a class name of the color you want. For example, if you want to give your paragraph tag the color red, you do the following:

使用Materialize，只需給它提供所需顏色的類名，就可以更改任何HTML元素的顏色。 例如，如果要將段落標(biāo)簽的顏色設(shè)置為紅色，請執(zhí)行以下操作：

<p class=”red”>Lorem Ipsum</p>

Additionally, you can also lighten or darken a color by giving it another class name lighten-1 or darken-1. For example, <h1 class=”blue lighten-1”>Sample Text</h1>. The 1 can be replaced with numbers up to 5 for lighten and up to 4 for darken. Higher numbers would apply lighter or darker shades of the color.

此外，您還可以通過給顏色另一個(gè)類名稱lighten-1或darken-1使顏色變暗或darken-1 。 例如， <h1 class=”blue lighten-1”>Sample Tex t </ h1>。 1可以用最多5的數(shù)字代替變亮，最多4的數(shù)字代替。 較高的數(shù)字將應(yīng)用較淺或較深的顏色陰影。

紐扣 (Buttons)

To Materialize a button, just give it the class name btn. You can also add a cool animation to it by giving it another class waves-effect. If you need a larger button, btn-large class can be used. For example:

要實(shí)現(xiàn)按鈕，只需為其指定類名稱btn 。 您還可以通過給它另一個(gè)類waves-effect為其添加一個(gè)很酷的動畫。 如果需要更大的按鈕，則可以使用btn-large類。 例如：

<button class=”btn”>Click </button> <!-- Materialized button without click animation --> <button class="btn waves-effect">Click </button> <!-- Materialized button with click animation --> <button class="btn-large">Click </button> <!-- Large Button -->

陰影 (Shadow)

In material design, everything should have a certain z-depth that determines how far raised or close to the page the element is.在材料設(shè)計(jì)中，所有內(nèi)容都應(yīng)具有一定的z深度，該深度確定元素凸起或靠近頁面的距離。

To apply a shadow-effect to an element, the z-depth-2 class can be used (2 can be replaced with numbers 1–5). For example:

要將陰影效果應(yīng)用于元素，可以使用z-depth-2類(可以將2替換為數(shù)字1-5)。 例如：

<div class="z-depth-2"><!-- Really cool stuff --></div>

結(jié)論 (Conclusion)

I’ve only scratched the surface here. There is a lot more available in Materialize (like transitions, cards, carousel, and modals). You can learn how to use all the components from the docs. Class names are very simple and the grid is really helpful to create responsive columns quickly. I wish you good luck!

我只在這里刮過表面。 在Materialize中有很多可用的功能(例如過渡，卡，轉(zhuǎn)盤和模態(tài))。 您可以從docs了解如何使用所有組件。 類名非常簡單，網(wǎng)格對于快速創(chuàng)建響應(yīng)列非常有幫助。 祝你好運(yùn)！

翻譯自: https://www.freecodecamp.org/news/an-quick-introduction-to-material-design-using-materialize-8a9b223c64f1/

materialize

總結(jié)

以上是生活随笔為你收集整理的materialize_使用Materialize快速介绍材料设计的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。