488 lines
12 KiB
Markdown
488 lines
12 KiB
Markdown
|
# Material Design CSS Framework
|
||
|
|
|
||
|
|
[](https://www.muicss.com)
|
||
|
|
|
||
|
|
MUI is a lightweight CSS framework that follows Google's Material Design guidelines.
|
||
|
|
|
||
|
|
[](https://gitter.im/muicss/mui?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
||
|
|
[](https://travis-ci.org/muicss/mui)
|
||
|
|
[](https://david-dm.org/muicss/mui)
|
||
|
|
[](https://david-dm.org/muicss/mui#info=devDependencies)
|
||
|
|
|
||
|
|
## Introduction
|
||
|
|
|
||
|
|
The MUI NPM package makes it easy to import MUI into a project and create a custom build that only includes the components you need.
|
||
|
|
|
||
|
|
The simplest way to use MUI is via the top level imports `muicss` and `muicss/react`:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
import { Appbar, Button, Panel } from 'muicss/react';
|
||
|
|
```
|
||
|
|
|
||
|
|
You can also optimize your builds by importing modules one-by-one from the lower level API:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
import Appbar from 'muicss/lib/react/appbar';
|
||
|
|
import Button from 'muicss/lib/react/button';
|
||
|
|
import Container from 'muicss/lib/react/container';
|
||
|
|
```
|
||
|
|
|
||
|
|
Here's an example of how to use MUI in a React app:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
import React from 'react';
|
||
|
|
import ReactDOM from 'react-dom';
|
||
|
|
import { Appbar, Button, Panel } from 'muicss/react';
|
||
|
|
|
||
|
|
class Example extends React.Component {
|
||
|
|
onClick() {
|
||
|
|
console.log('clicked on button');
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<Appbar />
|
||
|
|
<Container>
|
||
|
|
<Panel>
|
||
|
|
<Button onClick={this.onClick}>My Button</Button>
|
||
|
|
</Panel>
|
||
|
|
</Container>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
ReactDOM.render(<Example />, document.getElementById('example'));
|
||
|
|
```
|
||
|
|
|
||
|
|
## API Documentation
|
||
|
|
|
||
|
|
### React Library
|
||
|
|
|
||
|
|
All of the MUI React components can be accessed as top-level attributes of the `muicss/react` package. In addition, they can be accessed individually at `muicss/lib/react/{component}`.
|
||
|
|
|
||
|
|
#### Appbar
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import Appbar from 'muicss/lib/react/appbar';
|
||
|
|
|
||
|
|
<Appbar />
|
||
|
|
```
|
||
|
|
|
||
|
|
Read more: https://www.muicss.com/docs/v1/react/appbar
|
||
|
|
|
||
|
|
#### Button
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import Button from 'muicss/lib/react/button';
|
||
|
|
|
||
|
|
<Button />
|
||
|
|
* {String} color=default|primary|danger|accent
|
||
|
|
* {String} size=default|small|large
|
||
|
|
* {String} type=submit|button
|
||
|
|
* {String} variant=default|flat|raised|fab
|
||
|
|
* {Boolean} disabled=false|true
|
||
|
|
```
|
||
|
|
|
||
|
|
Read more: https://www.muicss.com/docs/v1/react/buttons
|
||
|
|
|
||
|
|
#### Checkbox
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import Checkbox from 'muicss/lib/react/checkbox';
|
||
|
|
|
||
|
|
<Checkbox />
|
||
|
|
* {String} label
|
||
|
|
* {String} value
|
||
|
|
* {Boolean} checked
|
||
|
|
* {Boolean} defaultChecked
|
||
|
|
* {Boolean} disabled=false|true
|
||
|
|
```
|
||
|
|
|
||
|
|
Read more: https://www.muicss.com/docs/v1/react/forms
|
||
|
|
|
||
|
|
#### Container
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import Container from 'muicss/lib/react/container';
|
||
|
|
|
||
|
|
<Container />
|
||
|
|
* {Boolean} fluid=false|true
|
||
|
|
```
|
||
|
|
|
||
|
|
Read more: https://www.muicss.com/docs/v1/react/container
|
||
|
|
|
||
|
|
#### Divider
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import Divider from 'muicss/lib/react/divider';
|
||
|
|
|
||
|
|
<Divider />
|
||
|
|
```
|
||
|
|
|
||
|
|
Read more: https://www.muicss.com/docs/v1/react/dividers
|
||
|
|
|
||
|
|
#### Dropdown Component
|
||
|
|
|
||
|
|
##### Dropdown
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import Dropdown from 'muicss/lib/react/dropdown';
|
||
|
|
|
||
|
|
<Dropdown />
|
||
|
|
* {String or ReactElement} label
|
||
|
|
* {String} alignMenu=left|right
|
||
|
|
* {String} color=default|primary|danger|accent
|
||
|
|
* {String} size=default|small|large
|
||
|
|
* {String} variant=default|flat|raised|fab
|
||
|
|
* {Boolean} disabled
|
||
|
|
* {Function} onClick
|
||
|
|
* {Function} onSelect
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
Read more: https://www.muicss.com/docs/v1/react/dropdowns
|
||
|
|
|
||
|
|
##### DropdownItem
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import DropdownItem 'muicss/lib/react/dropdown-item';
|
||
|
|
|
||
|
|
<DropdownItem />
|
||
|
|
* {String} link
|
||
|
|
* {String} target
|
||
|
|
* {String} value
|
||
|
|
* {Function} onClick
|
||
|
|
```
|
||
|
|
|
||
|
|
Read more: https://www.muicss.com/docs/v1/react/dropdowns
|
||
|
|
|
||
|
|
#### Form
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import Form from 'muicss/lib/react/form';
|
||
|
|
|
||
|
|
<Form />
|
||
|
|
* {Boolean} inline=false|true
|
||
|
|
```
|
||
|
|
|
||
|
|
Read more: https://www.muicss.com/docs/v1/react/forms
|
||
|
|
|
||
|
|
#### Grid Elements
|
||
|
|
|
||
|
|
##### Row
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import Row from 'muicss/lib/react/row';
|
||
|
|
|
||
|
|
<Row />
|
||
|
|
```
|
||
|
|
|
||
|
|
Read more: https://www.muicss.com/docs/v1/react/grid
|
||
|
|
|
||
|
|
##### Col
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import Col from 'muicss/lib/react/col';
|
||
|
|
|
||
|
|
<Col />
|
||
|
|
* {Integer} xs
|
||
|
|
* {Integer} xs-offset
|
||
|
|
* {Integer} sm
|
||
|
|
* {Integer} sm-offset
|
||
|
|
* {Integer} md
|
||
|
|
* {Integer} md-offset
|
||
|
|
* {Integer} lg
|
||
|
|
* {Integer} lg-offset
|
||
|
|
* {Integer} xl
|
||
|
|
* {Integer} xl-offset
|
||
|
|
```
|
||
|
|
|
||
|
|
Read more: https://www.muicss.com/docs/v1/react/grid
|
||
|
|
|
||
|
|
#### Input
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import Input from 'muicss/lib/react/input';
|
||
|
|
|
||
|
|
<Input />
|
||
|
|
* {String} defaultValue
|
||
|
|
* {String} hint
|
||
|
|
* {String} value
|
||
|
|
* {String} type=text|email|url|tel|password
|
||
|
|
* {Boolean} autoFocus
|
||
|
|
* {Function} onChange
|
||
|
|
```
|
||
|
|
|
||
|
|
Read more: https://www.muicss.com/docs/v1/react/forms
|
||
|
|
|
||
|
|
#### Panel
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import Panel from 'muicss/lib/react/panel';
|
||
|
|
|
||
|
|
<Panel />
|
||
|
|
```
|
||
|
|
|
||
|
|
Read more: https://www.muicss.com/docs/v1/react/panels
|
||
|
|
|
||
|
|
#### Radio
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import Radio from 'muicss/lib/react/panel';
|
||
|
|
|
||
|
|
<Radio />
|
||
|
|
* {String} name
|
||
|
|
* {String} value
|
||
|
|
* {Boolean} checked
|
||
|
|
* {Boolean} defaultChecked
|
||
|
|
* {Boolean} disabled=false|true
|
||
|
|
```
|
||
|
|
|
||
|
|
Read more: https://www.muicss.com/docs/v1/react/forms
|
||
|
|
|
||
|
|
#### Select Component
|
||
|
|
|
||
|
|
##### Select
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import Select from 'muicss/lib/react/select';
|
||
|
|
|
||
|
|
<Select />
|
||
|
|
* {String} defaultValue
|
||
|
|
* {String} name
|
||
|
|
* {String} value
|
||
|
|
* {Boolean} autoFocus=false|true
|
||
|
|
* {Boolean} disabled=false|true
|
||
|
|
* {Boolean} multiple=false|true
|
||
|
|
* {Boolean} readOnly=false|true
|
||
|
|
* {Boolean} required=false|true
|
||
|
|
* {Boolean} useDefault=false|true
|
||
|
|
* {Function} onChange
|
||
|
|
```
|
||
|
|
|
||
|
|
Read more: https://www.muicss.com/docs/v1/react/forms
|
||
|
|
|
||
|
|
##### Option
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import Option from 'muicss/lib/react/option';
|
||
|
|
|
||
|
|
<Option />
|
||
|
|
* {String} value
|
||
|
|
* {String} label
|
||
|
|
```
|
||
|
|
|
||
|
|
Read more: https://www.muicss.com/docs/v1/react/forms
|
||
|
|
|
||
|
|
#### Tabs Component
|
||
|
|
|
||
|
|
##### Tabs
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import Tabs from 'muicss/lib/react/tabs';
|
||
|
|
|
||
|
|
<Tabs />
|
||
|
|
* {Integer} initialSelectedIndex=0
|
||
|
|
* {Boolean} justified=false|true
|
||
|
|
* {Function} onChange
|
||
|
|
```
|
||
|
|
|
||
|
|
Read more: https://www.muicss.com/docs/v1/react/tabs
|
||
|
|
|
||
|
|
##### Tab
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import Tab from 'muicss/lib/react/tab';
|
||
|
|
|
||
|
|
<Tab />
|
||
|
|
* {String} label
|
||
|
|
* {String} value
|
||
|
|
* {Function} onActive
|
||
|
|
```
|
||
|
|
|
||
|
|
Read more: https://www.muicss.com/docs/v1/react/tabs
|
||
|
|
|
||
|
|
#### Textarea
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import Textarea from 'muicss/lib/react/textarea';
|
||
|
|
|
||
|
|
<Textarea />
|
||
|
|
* {String} defaultValue
|
||
|
|
* {String} hint
|
||
|
|
* {String} value
|
||
|
|
* {Integer} rows
|
||
|
|
* {Boolean} autoFocus
|
||
|
|
* {Function} onChange
|
||
|
|
```
|
||
|
|
|
||
|
|
Read more: https://www.muicss.com/docs/v1/react/forms
|
||
|
|
|
||
|
|
## CSS Helpers
|
||
|
|
|
||
|
|
```html
|
||
|
|
<!-- animation -->
|
||
|
|
<div className="mui--no-transition"></div>
|
||
|
|
|
||
|
|
<!-- alignment -->
|
||
|
|
<div className="mui--text-left"></div>
|
||
|
|
<div className="mui--text-right"></div>
|
||
|
|
<div className="mui--text-center"></div>
|
||
|
|
<div className="mui--text-justify"></div>
|
||
|
|
<div className="mui--text-nowrap"></div>
|
||
|
|
<div className="mui--align-baseline"></div>
|
||
|
|
<div className="mui--align-top"></div>
|
||
|
|
<div className="mui--align-middle"></div>
|
||
|
|
<div className="mui--align-bottom"></div>
|
||
|
|
|
||
|
|
<!-- depth helpers -->
|
||
|
|
<div className="mui--z1"></div>
|
||
|
|
<div className="mui--z2"></div>
|
||
|
|
<div className="mui--z3"></div>
|
||
|
|
<div className="mui--z4"></div>
|
||
|
|
<div className="mui--z5"></div>
|
||
|
|
|
||
|
|
<!-- float helpers -->
|
||
|
|
<div className="mui--clearfix"></div>
|
||
|
|
<div className="mui--pull-right"></div>
|
||
|
|
<div className="mui--pull-left"></div>
|
||
|
|
|
||
|
|
<!-- toggle helpers -->
|
||
|
|
<div className="mui--hide"></div>
|
||
|
|
<div className="mui--show"></div>
|
||
|
|
<div className="mui--invisible"></div>
|
||
|
|
<div className="mui--overflow-hidden"></div>
|
||
|
|
|
||
|
|
<!-- responsive utilities -->
|
||
|
|
<div className="mui--visible-xs-block"></div>
|
||
|
|
<div className="mui--visible-xs-inline"></div>
|
||
|
|
<div className="mui--visible-xs-inline-block"></div>
|
||
|
|
<div className="mui--visible-sm-block"></div>
|
||
|
|
<div className="mui--visible-sm-inline"></div>
|
||
|
|
<div className="mui--visible-sm-inline-block"></div>
|
||
|
|
<div className="mui--visible-md-block"></div>
|
||
|
|
<div className="mui--visible-md-inline"></div>
|
||
|
|
<div className="mui--visible-md-inline-block"></div>
|
||
|
|
<div className="mui--visible-lg-block"></div>
|
||
|
|
<div className="mui--visible-lg-inline"></div>
|
||
|
|
<div className="mui--visible-lg-inline-block"></div>
|
||
|
|
<div className="mui--hidden-xs"></div>
|
||
|
|
<div className="mui--hidden-sm"></div>
|
||
|
|
<div className="mui--hidden-md"></div>
|
||
|
|
<div className="mui--hidden-lg"></div>
|
||
|
|
|
||
|
|
<!-- typograpy -->
|
||
|
|
<div className="mui--text-display4"></div>
|
||
|
|
<div className="mui--text-display3"></div>
|
||
|
|
<div className="mui--text-display2"></div>
|
||
|
|
<div className="mui--text-display1"></div>
|
||
|
|
<div className="mui--text-headline"></div>
|
||
|
|
<div className="mui--text-title"></div>
|
||
|
|
<div className="mui--text-subhead"></div>
|
||
|
|
<div className="mui--text-body2">Body2</div>
|
||
|
|
<div className="mui--text-body1">Body1</div>
|
||
|
|
<div className="mui--text-caption">Caption</div>
|
||
|
|
<div className="mui--text-menu">Menu</div>
|
||
|
|
<div className="mui--text-button">Button</div>
|
||
|
|
|
||
|
|
<!-- text color -->
|
||
|
|
<div className="mui--text-dark"></div>
|
||
|
|
<div className="mui--text-dark-secondary"></div>
|
||
|
|
<div className="mui--text-dark-hint"></div>
|
||
|
|
<div className="mui--text-light"></div>
|
||
|
|
<div className="mui--text-light-secondary"></div>
|
||
|
|
<div className="mui--text-light-hint"></div>
|
||
|
|
<div className="mui--text-accent"></div>
|
||
|
|
<div className="mui--text-accent-secondary"></div>
|
||
|
|
<div className="mui--text-accent-hint"></div>
|
||
|
|
<div className="mui--text-danger"></div>
|
||
|
|
<div className="mui--text-black"></div>
|
||
|
|
<div className="mui--text-white"></div>
|
||
|
|
|
||
|
|
<!-- user select -->
|
||
|
|
<div className="mui--no-user-select"></div>
|
||
|
|
|
||
|
|
<!-- appbar dimension helpers -->
|
||
|
|
<div className="mui--appbar-height"></div>
|
||
|
|
<div className="mui--appbar-min-height"></div>
|
||
|
|
<div className="mui--appbar-line-height"></div>
|
||
|
|
|
||
|
|
<!-- list helpers -->
|
||
|
|
<ul className="mui-list--unstyled"></ul>
|
||
|
|
<ul className="mui-list--inline"></ul>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Directory Tree
|
||
|
|
|
||
|
|
<pre>
|
||
|
|
muicss
|
||
|
|
├── index.js
|
||
|
|
├── lib
|
||
|
|
│ ├── css
|
||
|
|
│ │ ├── mui.css
|
||
|
|
│ │ └── mui.min.css
|
||
|
|
│ ├── js
|
||
|
|
│ │ ├── config.js
|
||
|
|
│ │ └── lib
|
||
|
|
│ │ ├── forms.js
|
||
|
|
│ │ ├── jqLite.js
|
||
|
|
│ │ └── util.js
|
||
|
|
│ ├── react
|
||
|
|
│ │ ├── appbar.js
|
||
|
|
│ │ ├── babel-helpers.js
|
||
|
|
│ │ ├── button.js
|
||
|
|
│ │ ├── caret.js
|
||
|
|
│ │ ├── checkbox.js
|
||
|
|
│ │ ├── col.js
|
||
|
|
│ │ ├── container.js
|
||
|
|
│ │ ├── divider.js
|
||
|
|
│ │ ├── dropdown-item.js
|
||
|
|
│ │ ├── dropdown.js
|
||
|
|
│ │ ├── form.js
|
||
|
|
│ │ ├── _input.js
|
||
|
|
│ │ ├── panel.js
|
||
|
|
│ │ ├── radio.js
|
||
|
|
│ │ ├── row.js
|
||
|
|
│ │ ├── select-item.js
|
||
|
|
│ │ ├── select.js
|
||
|
|
│ │ ├── tab.js
|
||
|
|
│ │ ├── tabs.js
|
||
|
|
│ │ ├── textarea-input.js
|
||
|
|
│ │ └── text-input.js
|
||
|
|
│ └── sass
|
||
|
|
│ ├── mui
|
||
|
|
│ │ ├── _appbar.scss
|
||
|
|
│ │ ├── _buttons.scss
|
||
|
|
│ │ ├── _colors.scss
|
||
|
|
│ │ ├── _dividers.scss
|
||
|
|
│ │ ├── _dropdowns.scss
|
||
|
|
│ │ ├── _forms.scss
|
||
|
|
│ │ ├── _grid.scss
|
||
|
|
│ │ ├── _helpers.scss
|
||
|
|
│ │ ├── _layout.scss
|
||
|
|
│ │ ├── mixins
|
||
|
|
│ │ │ ├── _buttons.scss
|
||
|
|
│ │ │ ├── _grid-framework.scss
|
||
|
|
│ │ │ ├── _typography.scss
|
||
|
|
│ │ │ └── _util.scss
|
||
|
|
│ │ ├── _mixins.scss
|
||
|
|
│ │ ├── _overlay.scss
|
||
|
|
│ │ ├── _panel.scss
|
||
|
|
│ │ ├── _ripple.scss
|
||
|
|
│ │ ├── _scaffolding.scss
|
||
|
|
│ │ ├── _semantic-markup.scss
|
||
|
|
│ │ ├── _tables.scss
|
||
|
|
│ │ ├── _tabs.scss
|
||
|
|
│ │ ├── _typography.scss
|
||
|
|
│ │ └── _variables.scss
|
||
|
|
│ ├── mui-colors.scss
|
||
|
|
│ ├── mui.scss
|
||
|
|
│ └── normalize-3.0.2.scss
|
||
|
|
├── LICENSE.txt
|
||
|
|
├── package.json
|
||
|
|
├── react.js
|
||
|
|
└── README.md
|
||
|
|
</pre>
|