Material UI: Very powerful CSS framework_html/css_WEB-ITnose

Material UI is a very powerful CSS framework with a very fresh and concise interface. Material UI takes advantage of Google’s new Material Design language and makes each UI component very independent, so it was developed It will also be easier for users to use Material UI. Similar to Bootstrap, Material UI provides many commonly used UI components. In addition to the most basic menus, buttons, sliding bars, progress bars, radio buttons/check boxes, it also provides a very interesting calendar component, and also There are some interesting icons provided.

Features of Material UI

There are many components, and the style of each component is relatively consistent.

Provides npm package form, which is relatively convenient to use.

This is all open source, you can use this open source CSS framework at will.

Application examples of Material UI

First we start from the most basic.

Menu

The following is a simple multi-level 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: mui.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: mui.MenuItem.Types.NESTED, text: 'Nested Item 4', items: [        { payload: '1', text: 'Nested Item 4.1' },        { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4.2', items: [          { payload: '1', text: 'Nested Item 4.2.1', disabled: true },          { 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 band The vertical menu of icons

has the following code:

//iconClassName is the classname for our icon that will get passed into mui.FontIconiconMenuItems = [   { payload: '1', text: 'Live Answer', iconClassName: 'muidocs-icon-communication-phone', number: '10' },   { payload: '2', text: 'Voicemail', iconClassName: 'muidocs-icon-communication-voicemail',  number: '5' },   { payload: '3', text: 'Starred', iconClassName: 'muidocs-icon-action-stars', number: '3' },   { payload: '4', text: 'Shared', iconClassName: 'muidocs-icon-action-thumb-up',  number: '12' }];<Menu menuItems={iconMenuItems} autoWidth={false}/>

Button

The following is a simple colored button. Clicking the button will cause a wave spreading 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 the radio button check box

The following is the beautified radio button and check box of Material UI The code for the marquee

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 component

This is the most beautiful CSS calendar component that I personally think

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} />

Material UI also has many useful CSS UI components. You can go to its official website to download and learn to use.

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

Copyright Statement: You are welcome to reprint, please add the original address when reprinting, thank you for your cooperation, and happy learning!