The MUI CSS Preact library is designed from the ground up to be fast, small and developer-friendly. Using the MUI Preact library you can add MUI components to your Preact apps and switch seamlessly between MUI CSS/JS and MUI Preact even within the same app.
**Preact MUI CSS Components **
To use MUI Preact you must include the MUI CSS and JS file in your HTML payload:
<link href="//cdn.muicss.com/mui-0.9.6/css/mui.min.css" rel="stylesheet"
type="text/css" media="screen" />
<script src="//cdn.muicss.com/mui-0.9.6/js/mui.min.js"></script>npm install preact-mui
// Access components individually for smaller build files (RECOMMENDED)
import Appbar from 'preact-mui/lib/appbar';
import Button from 'preact-mui/lib/button';
import Container from 'preact-mui/lib/container';
// Access all components from preact-mui module
import { Appbar, Button, Container } from 'preact-mui';
// Preact-MUI also supports ES5 syntax
var preactMui = require('preact-mui');
var Appbar = preactMui.Appbar;
var Button = preactMui.Button;
var Container = preactMui.Container;import {h, Component, render} from 'preact';
import Appbar from 'preact-mui/lib/appbar';
import Button from 'preact-mui/lib/button';
import Container from 'preact-mui/lib/container';
class Example extends React.Component {
render() {
return (
<div>
<Appbar></Appbar>
<Container fluid={true}>
<Button color="primary">button</Button>
</Container>
</div>
);
}
}
render(<Example />, document.getElementById('example'));Preact-MUI has the same API with React MUI, then you can check tre React API and use the same with Preact-MUI.
All of the MUI React components can be accessed as top-level attributes of the preact-mui package. In addition, they can be accessed individually at preact/lib/{component}.
import Appbar from 'preact-mui/lib/appbar';
<Appbar />Read more: https://www.muicss.com/docs/v1/react/appbar
import Button from 'preact-mui/lib/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|trueRead more: https://www.muicss.com/docs/v1/react/buttons
import Checkbox from 'preact-mui/lib/checkbox';
<Checkbox />
* {String} label
* {String} value
* {Boolean} checked
* {Boolean} defaultChecked
* {Boolean} disabled=false|trueRead more: https://www.muicss.com/docs/v1/react/forms
import Container from 'preact-mui/lib/container';
<Container />
* {Boolean} fluid=false|trueRead more: https://www.muicss.com/docs/v1/react/container
import Divider from 'preact-mui/lib/divider';
<Divider />Read more: https://www.muicss.com/docs/v1/react/dividers
import Dropdown from 'preact-mui/lib/dropdown';
<Dropdown />
* {String} label
* {String} alignMenu=left|right
* {String} color=default|primary|danger|accent
* {String} size=default|small|large
* {String} variant=default|flat|raised|fab
* {Boolean} disabledRead more: https://www.muicss.com/docs/v1/react/dropdowns
import DropdownItem from 'preact-mui/lib/dropdown-item';
<DropdownItem />
* {String} linkRead more: https://www.muicss.com/docs/v1/react/dropdowns
import Form from 'preact-mui/lib/form';
<Form />
* {Boolean} inline=false|true
* {Boolean} legend=false|trueRead more: https://www.muicss.com/docs/v1/react/forms
import Row from 'preact-mui/lib/row';
<Row />Read more: https://www.muicss.com/docs/v1/react/grid
import Col from 'preact-mui/lib/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-offsetRead more: https://www.muicss.com/docs/v1/react/grid
import Input from 'preact-mui/lib/input';
<Input />
* {String} defaultValue
* {String} hint
* {String} value
* {Boolean} floatingLabel
* {String|Object} style
* {String} type=text|email|url|tel|passwordRead more: https://www.muicss.com/docs/v1/react/forms
import Panel from 'preact-mui/lib/panel';
<Panel />Read more: https://www.muicss.com/docs/v1/react/panels
import Radio from 'preact-mui/lib/panel';
<Radio />
* {String} name
* {String} value
* {String} label
* {Boolean} checked
* {Boolean} defaultChecked
* {Boolean} disabled=false|trueRead more: https://www.muicss.com/docs/v1/react/forms
import Select from 'preact-mui/lib/select';
<Select />
* {String} defaultValue
* {String} label
* {String|Object} style
* {Boolean} disabled=false|trueRead more: https://www.muicss.com/docs/v1/react/forms
import Option from 'preact-mui/lib/option';
<Option />
* {String} value
* {String} labelRead more: https://www.muicss.com/docs/v1/react/forms
import Tabs from 'preact-mui/lib/tabs';
<Tabs />
* {Boolean} justified=false|trueRead more: https://www.muicss.com/docs/v1/react/tabs
import Tab from 'preact-mui/lib/tab';
<Tab />
* {Boolean} selected
* {String} label
* {String} valueRead more: https://www.muicss.com/docs/v1/react/tabs
import Textarea from 'preact-mui/lib/textarea';
<Textarea />
* {String} defaultValue
* {String} hint
* {String} value
* {Boolean} floatingLabel
* {String} label
* {String|Object} styleRead more: https://www.muicss.com/docs/v1/react/forms
Extra components that it's created on MUI Preact.js Library.
import {h, Component, render} from 'preact';
import Appbar from 'preact-mui/lib/appbar';
import Button from 'preact-mui/lib/button';
import Container from 'preact-mui/lib/container';
import Modal from 'preact-mui/lib/modal'
/**
* @class Modal
*
* @param { string } openedBy The element Id that when clicked,
* will open the modal
*
* @param { string } closedBy The element Id that when clicked,
* will close the modal
*
* @param { function } onClose The hanlder that will trigger,
* when you close the Modal
*
* @param { string } position The position of container modal.
* Can be: center, centerLeft, centerRight, centerTop, centerBottom
* If you set some of these positions, the modal will appear on this position
*/
class Example extends React.Component {
render() {
return (
<div>
<Appbar></Appbar>
<Container fluid={true}>
<Modal
openedBy="buttonModal"
closedBy="buttonClose"
onClose={
() => {
console.log('Modal Closed.')
}
}>
<h1>I am a children of Modal Component</h1>
<Button id="buttonClose">Close Modal</Button>
</Modal>
<Button color="primary" id="buttonModal">Open Modal</Button>
</Container>
</div>
);
}
}
render(<Example />, document.getElementById('example'));<!-- animation -->
<div class="mui--no-transition"></div>
<!-- alignment -->
<div class="mui--text-left"></div>
<div class="mui--text-right"></div>
<div class="mui--text-center"></div>
<div class="mui--text-justify"></div>
<div class="mui--text-nowrap"></div>
<div class="mui--align-baseline"></div>
<div class="mui--align-top"></div>
<div class="mui--align-middle"></div>
<div class="mui--align-bottom"></div>
<!-- depth helpers -->
<div class="mui--z1"></div>
<div class="mui--z2"></div>
<div class="mui--z3"></div>
<div class="mui--z4"></div>
<div class="mui--z5"></div>
<!-- float helpers -->
<div class="mui--clearfix"></div>
<div class="mui--pull-right"></div>
<div class="mui--pull-left"></div>
<!-- toggle helpers -->
<div class="mui--hide"></div>
<div class="mui--show"></div>
<div class="mui--invisible"></div>
<div class="mui--overflow-hidden"></div>
<!-- responsive utilities -->
<div class="mui--visible-xs-block"></div>
<div class="mui--visible-xs-inline"></div>
<div class="mui--visible-xs-inline-block"></div>
<div class="mui--visible-sm-block"></div>
<div class="mui--visible-sm-inline"></div>
<div class="mui--visible-sm-inline-block"></div>
<div class="mui--visible-md-block"></div>
<div class="mui--visible-md-inline"></div>
<div class="mui--visible-md-inline-block"></div>
<div class="mui--visible-lg-block"></div>
<div class="mui--visible-lg-inline"></div>
<div class="mui--visible-lg-inline-block"></div>
<div class="mui--hidden-xs"></div>
<div class="mui--hidden-sm"></div>
<div class="mui--hidden-md"></div>
<div class="mui--hidden-lg"></div>
<!-- typograpy -->
<div class="mui--text-display4"></div>
<div class="mui--text-display3"></div>
<div class="mui--text-display2"></div>
<div class="mui--text-display1"></div>
<div class="mui--text-headline"></div>
<div class="mui--text-title"></div>
<div class="mui--text-subhead"></div>
<div class="mui--text-body2">Body2</div>
<div class="mui--text-body1">Body1</div>
<div class="mui--text-caption">Caption</div>
<div class="mui--text-menu">Menu</div>
<div class="mui--text-button">Button</div>
<!-- text color -->
<div class="mui--text-dark"></div>
<div class="mui--text-dark-secondary"></div>
<div class="mui--text-dark-hint"></div>
<div class="mui--text-light"></div>
<div class="mui--text-light-secondary"></div>
<div class="mui--text-light-hint"></div>
<div class="mui--text-accent"></div>
<div class="mui--text-accent-secondary"></div>
<div class="mui--text-accent-hint"></div>
<div class="mui--text-danger"></div>
<div class="mui--text-black"></div>
<div class="mui--text-white"></div>
<!-- background color -->
<div class="mui--bg-primary"></div>
<div class="mui--bg-primary-dark"></div>
<div class="mui--bg-primary-light"></div>
<div class="mui--bg-accent"></div>
<div class="mui--bg-accent-dark"></div>
<div class="mui--bg-accent-light"></div>
<div class="mui--bg-danger"></div>
<!-- user select -->
<div class="mui--no-user-select"></div>
<!-- appbar dimension helpers -->
<div class="mui--appbar-height"></div>
<div class="mui--appbar-min-height"></div>
<div class="mui--appbar-line-height"></div>
<!-- list helpers -->
<ul class="mui-list--unstyled"></ul>
<ul class="mui-list--inline"></ul>