Material UI: Very powerful CSS framework, materialuicss framework

Material UI: Very powerful CSS framework, materialuicss framework

Material UI is a CSS framework with very powerful functions and simple interfaces. Material UI uses the brand-new Design language of Google's Material Design and makes every UI component very independent, therefore, it is easier for developers to use the Material UI. Similar to Bootstrap, Material UI provides many common UI components, except for the basic menus, buttons, slide bars, progress bars, and single-sheet/check boxes, it also provides an interesting calendar component and some interesting icons.

Material UI features

• The components are rich and the style of each component is consistent.
• The npm package is provided for ease of use.
• All of this is open-source. You can use this open-source CSS framework at will.

Application Instance of Material UI

First, let's start from the basic perspective.

Menu

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

Below is a vertical menu with icons

The Code is as follows:

//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 color button. clicking the button will show the animation effect of the wave spreading.

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 ticket check box

The following are the beautification of the Material UI Single-sheet and check boxes.

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 component

This is the most beautiful CSS calendar component.

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 download them from its official website and learn how to use them.

 

 

 

This article