material ui_使用Material UI使用ReactJS进行材质设计

material ui

Material Design is well known these days because of its deep design principles. Coming to the history, It is a design language that Google developed in 2014. It uses grid-based layouts, responsive animations, transitions, padding, and depth effects such as lighting and shadow.

由于其深层的设计原理， 近来材料设计众所周知。 回顾历史，这是Google在2014年开发的一种设计语言。它使用基于网格的布局，自适应动画，过渡，填充和深度效果(如照明和阴影)。

I remember playing with Material examples and implementing them myself. It’s really smooth and gives you a sense of achievement especially in UI/UX.

我记得玩过Material实例并自己实现了这些实例。 它真的很流畅，给您带来成就感，尤其是在UI / UX中。

Few examples

几个例子

If we try to observe deeply and go through the documentation, We can sense the perfection, consistency, and clarity on how the design can be taken care of. It is inspired by the physical world and its textures.

如果我们尝试深入观察并阅读文档，则可以感觉到如何精心设计的完美，连贯和清晰。 它受到物理世界及其纹理的启发。

Best parts

最好的零件

1. Both for designers & developers
   面向设计师和开发人员
2. Cross-platform (Web, Android, IOS, etc.)
   跨平台(Web，Android，IOS等)
3. Saves time
   节省时间

Now we know the importance of Material Design. Let’s find how we can use it with ReactJS.

现在我们知道了材料设计的重要性。 让我们找到如何在ReactJS中使用它。

材料设计+ ReactJS (Material Design + ReactJS)

After some geeky research, I finally landed on the Material UI, Dam this is what I am looking for.

经过一些令人讨厌的研究，我终于找到了Material UI， Dam，这就是我想要的。

After React released this open-source Material Kit also released in 2014 and in a short time has grown popularity with over 60k stars, It is one of the top user interface libraries for React out there.

在React发布这个开源材料工具包之后，该工具包也于2014年发布，并在短时间内Swift受到超过6万颗星的欢迎，它是React的顶级用户界面库之一。

https://material-ui.com/

https://material-ui.com/

A perfect library with everything power-packed covering almost all the UI components that can be flexibly used with React web or mobile application.

一个完善的库，包含所有功能强大的功能，几乎涵盖了可以灵活地与React Web或移动应用程序一起使用的所有UI组件。

Material-UI components work in isolation. They are self-supporting, and will only inject the styles they need to display.

Material-UI组件是独立工作的。 它们是自给自足的 ，只会注入需要显示的样式。

入门 (Getting Started)

Once installed relatively simple to use.

一旦安装，使用起来比较简单。

Material-UI was designed with the Roboto font in mind. We need to include this font CDN file in the index, If we want to use the different font we can plan accordingly.

Material-UI的设计考虑了Roboto字体。 我们需要在索引中包括该字体CDN文件。如果我们要使用其他字体，我们可以据此进行计划。

材质SVG图标 (Material SVG Icons)

In order to use these Icons, We need to install them separately.

为了使用这些图标，我们需要单独安装它们。

Usage,

用法，

组件 (Components)

Components are divided into few categories as per their functionalities.

组件按其功能分为几类。

LayoutAll the layout items like Box, Container, etc.

布局 所有布局项目，例如Box，Container等。

InputsAll the input components — Form components, Slider, Switch, etc.

输入 所有输入组件-表单组件，滑块，开关等。

Navigation Components like Bottom Navigation, Breadcrumbs, Menu, link, etc.

导航 组件，例如底部导航，面包屑，菜单，链接等。

Surfaces App bar, Paper, Card, Accordion were the surface components. For the Paper the best part is Elevation.

Surfaces 应用栏，Paper，Card，Accordion是表面组件。 对于纸张，最好的部分是高程。

FeedbackProgress bars, Backdrop, etc.

反馈 进度栏，背景等。

Data DisplayComponents for displaying data like List, Table, Tooltip, Typography, etc.

数据显示 组件，用于显示列表，表格，工具提示，版式等数据。

Utils Furthermore, components like Popover, Slide, Portal, Modal, etc.

实用程序 此外，组件还包括Popover，Slide，Portal，Modal等。

LabAs the name itself explains to us — It is a Laboratory.This package hosts the incubator components that are not yet ready to move to the core.

实验室 顾名思义，它就是一个 实验室 。 该软件包包含尚未准备好转移到核心的培养箱组件。

组件API (Component API)

Every component usage is explained in detail. More about props and CSS customization points.

每个组件的用法都有详细说明。 有关道具和CSS定制点的更多信息。

材质UI /样式 (Material UI/Styles)

We can use material styling without using Material UI Components as well.

我们也可以不使用Material UI组件而使用Material样式。

• Blazing fast
  快速燃烧
• It’s extensible via a plugin API
  可通过插件API进行扩展

• It uses JSS as its core

  它以JSS为核心

• < 15kb gzipped

  <15kb压缩

Usage,

用法，

Lots more to dive into styles. https://material-ui.com/styles/basics/

还有更多内容可供您探索。 https://material-ui.com/styles/basics/

材质用户界面/系统 (Material UI/System)

A powerful design system. It provides low-level utility functions called style functions for building powerful design systems. Some of the key features

强大的设计系统。 它提供了称为样式功能的低级实用程序功能，用于构建功能强大的设计系统。 一些关键特征

• Access the theme values from the component props
  从组件道具访问主题值
• UI Consistency
  UI一致性
• Responsive Styles
  响应式
• Work anywhere irrespective of theme object
  无论主题对象如何，都可以在任何地方工作
• Work with CSS in JS Solutions
  在JS解决方案中使用CSS

• < 4kb gzipped

  <4kb压缩

• Fast enough
  足够快

We can create a component with the Material system.

我们可以使用Material系统创建一个组件。

Few more interesting things to cover

很少有其他有趣的事情要介绍

样式库互操作性 (Style Library Interoperability)

Material UI — Let us use the JSS based styling. But at the same time, we can different ways as well

材质UI-让我们使用基于JSS的样式。 但同时，我们也可以采用不同的方式

• Plain CSS
  纯CSS
• Global CSS
  全球CSS
• Styled Components
  样式化的组件
• CSS Modules
  CSS模块
• Emotion
  情感
• React JSS
  ReactJSS

This is one of the best parts of flexibility.

这是灵活性的最佳部分之一。

捆束尺寸 (Bundle Size)

This is one of the most crucial. Without knowing how to optimizing or How efficiently we can use the library, Then it would be a failure at the end.

这是最关键的之一。 如果不知道如何优化或如何有效地使用库，那么最终将是失败的。

Bundle Size Matters

捆束大小事项

Material UI contains a lot of amazing stuff at the same time, It will be a bottleneck, If we don’t know how to reduce the size. Few tools can help us to inspect the overall bundle size as well.

材质UI同时包含许多令人惊奇的内容，如果我们不知道如何减小尺寸，它将是一个瓶颈。 很少有工具可以帮助我们检查捆绑包的整体尺寸。

As we know we all have 2 options to import Material-UI components

众所周知，我们都有2个导入 Material-UI组件的选项

Option 1 (Direct import) is much faster BUT. You need to configure stuff in Babel. Because it won’t use the exports in @material-ui/core/index.js like option2.

选项1(直接导入)的速度要快得多。 您需要在Babel中配置内容。 因为它不会像option2那样使用@material-ui/core/index.js的导出。

More details: https://material-ui.com/guides/minimizing-bundle-size/

更多详细信息： https : //material-ui.com/guides/minimizing-bundle-size/

设计资料 (Design Stuff)

Till now we have gone through a lot of DEV stuff. Now coming to Design. Yep, It’s great that we can get both Figma & Sketch UI Kit of the entire material design.

到目前为止，我们已经经历了很多DEV的工作。 现在来设计 。 是的，很高兴我们可以同时获得整个材料设计的Figma和Sketch UI套件。

Figma

菲格玛

Sketch

草图

A lot more to dig and play with, But for now, I am much convinced to adopt this into our Tech.

还有更多需要挖掘和使用的东西，但是到目前为止，我深信将其应用到我们的技术中。

Both Design & Dev can speak the same language with consistency across the products.

在所有产品中，Design＆Dev都可以说相同的语言。

Go through and comment on your views on this.

浏览并评论您对此的看法。

Stay tuned!

敬请关注！

翻译自: https://uxdesign.cc/material-design-with-reactjs-using-material-ui-9f7e81a955f7

material ui