materialize

什么是材料設計？ (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創建的一種設計語言。 根據material.io ，Material Design旨在結合：

…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.

…具有創新性和技術與科學可能性的優秀設計經典原則。 它旨在開發一個單一的基礎系統，以實現跨平臺和設備尺寸的統一體驗。 移動戒律是最基本的，但是觸摸，語音，鼠標和鍵盤都是一流的輸入法。

為什么要使用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在所有設備上提供無縫的用戶體驗。 響應式過渡和動畫以及諸如陰影和閃電之類的填充和深度效果，使其感覺優雅且用戶友好。 Google幾乎在其所有應用程序(例如Keep和Calendar)上都使用Material Design。

如何在Web應用程序中使用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是一個類似于Bootstrap的響應式前端組件庫。 它提供了Bootstrap必須提供的所有內容，但不同之處在于Materialize遵循材料設計原則。 這是一個示例模板。

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

• Grid
  格
• Tables
  桌子
• Badges, buttons, breadcrumbs
  徽章，紐扣，面包屑
• Cards, chips, collections
  卡，籌碼，收藏
• Footer, forms
  頁腳，表格
• Navbar
  導航欄
• 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中，您將一路順風！

<!-- 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元素的顏色。 例如，如果要將段落標簽的顏色設置為紅色，請執行以下操作：

<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.

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

紐扣 (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:

要實現按鈕，只需為其指定類名稱btn 。 您還可以通過給它另一個類waves-effect為其添加一個很酷的動畫。 如果需要更大的按鈕，則可以使用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.

在材料設計中，所有內容都應具有一定的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:

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

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

結論 (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中有很多可用的功能(例如過渡，卡，轉盤和模態)。 您可以從docs了解如何使用所有組件。 類名非常簡單，網格對于快速創建響應列非常有幫助。 祝你好運！

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

materialize