Material UI: A very powerful CSS framework

The Material UI is a very powerful, clean and concise CSS framework that leverages Google's Material design language and makes every UI component very independent. This makes it easier for developers to use the material UI. Like Bootstrap , the Material UI provides a lot of common UI components, in addition to the most basic menus, buttons, sliders, progress bars, radio boxes/checkboxes, it also provides a very interesting calendar component, plus some interesting icons.

Features of the Material UI

• The components are rich and each component has a consistent style.
• The form of NPM package is provided, which is relatively convenient to use.
• All of this is open source, and you can use this open source CSS framework.

Application examples of Material UI

First of all, we look at the most basic.

Menu

Here is a simple multilevel drop-down menu

The code is as follows:

Nestedmenuitems = [{type:mui. MenuItem.Types.NESTED, Text: ' Reports ', items: [{payload: ' 1 ', text: ' NESTED Item 1 '}, {Type:mui. MenuItem.Types.NESTED, Text: ' NESTED item 2 ', items: [{payload: ' 1 ', text: ' NESTED item 2.1 '}, {Type:mu          i.menuitem.types.nested, Text: ' NESTED item 2.2 ', items: [{payload: ' 1 ', text: ' NESTED Item 2.2.1 '}, {payload: ' 3 ', text: ' Nested Item 2.2.2 '}] }, {payload: ' 3 ', text: ' Nested item 2.3 '}]}, {payload: ' 3 ', text: ' Nested Item 3 '}, {type:m Ui. MenuItem.Types.NESTED, Text: ' NESTED item 4 ', items: [{payload: ' 1 ', text: ' NESTED item 4.1 '}, {Type:mu i.menuitem.types.nested, Text: ' NESTED item 4.2 ', items: [{payload: ' 1 ', text: ' NESTED Item 4.2.1 ', disabled:t      Rue}, {payload: ' 3 ', text: ' Nested item 4.2.2 '}]}, {payload: ' 3 ', text: ' Nested Item 4.3 '}    ]}, {payload: ' 4 ', text: ' Nested Item 5 '}]},{payload: ' 1 ', text: ' Audio Library '}, {payload: ' 2 ', text: ' Settings '}, {payload: ' 3 ', text: ' Logout ', disabled: true}];<menu Menuitems={nestedmenuitems} autowidth={false}/>

The following is a vertical menu with an icon

The code is as follows:

Iconclassname is the classname for our icon, that'll get passed into MUI. Fonticoniconmenuitems = [   {payload: ' 1 ', text: ' Live Answer ', iconclassname: ' Muidocs-icon-communication-phone ', Number: ' Ten '},   {payload: ' 2 ', text: ' Voicemail ', Iconclassname: ' Muidocs-icon-communication-voicemail ',  Number: ' 5 '},   {payload: ' 3 ', Text: ' Starred ', Iconclassname: ' Muidocs-icon-action-stars ', Number: ' 3 '},   {Paylo Ad: ' 4 ', Text: ' Shared ', iconclassname: ' muidocs-icon-action-thumb-up ', number  : '}];<menu ' menuitems={ Iconmenuitems} autowidth={false}/>

Button

The following is a simple color button, the click of the button will be a wave spread animation effect.

The code is as follows:

Raised Buttons<raisedbutton label= "Default"/><raisedbutton label= "Primary" Primary={true}/>< Raisedbutton label= "secondary" secondary={true}/><div style={styles.container}>  <RaisedButton Primary={true} label= "Choose an Image" >    <input type= "file" Style={styles.exampleimageinput}></input >  </raisedbutton></div><div style={styles.container}>  <raisedbutton linkButton={ true} href= "Https://github.com/callemall/material-ui" secondary={true} label= "GitHub" >    <fonticon style={ Styles.examplebuttonicon} classname= "Muidocs-icon-custom-github"/>  </RaisedButton></div>< Raisedbutton label= "Disabled" Disabled={true}/>

Beautify a radio box check box

The following is a material UI with a well-beautified radio box and check box

The code is as follows:

<radiobuttongroup name= "Shipspeed" defaultselected= "Not_light" >        <radiobutton          value= "Light"          Label= "Prepare for light Speed"          style={{marginbottom:16}}/>        <radiobutton          value= "Not_light"          Label= "Light speed Too Slow"          style={{marginbottom:16}}/>        <radiobutton          value= "Ludicrous"          Label= "Go to ludicrous Speed"          style={{marginbottom:16}}          disabled={true}/>      </radiobuttongroup >

Calendar components

This is one of the most beautiful CSS calendar components.

The code is as follows:

Portrait dialog<datepicker  hinttext= "Portrait Dialog"//landscape dialog<datepicker  hinttext= " Landscape Dialog "  mode=" Landscape "/>//ranged date picker<datepicker  hinttext=" Ranged date picker "  Autook={this.state.autook}  mindate={this.state.mindate}  maxdate={this.state.maxdate}  Showyearselector={this.state.showyearselector}/>

The Material UI also has a lot of useful CSS UI components that you can download and learn to use on its official website.

This article turns from http://www.codeceo.com/article/material-ui.html

Copyright NOTICE: Welcome to reprint, hope to reprint the same time add the original address, thank you for your cooperation, learning happy!

Material UI: A very powerful CSS framework