preact-mui

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.

Components Example

**Preact MUI CSS Components **

Get Started

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>

Install

npm install preact-mui

Using Components

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

Real life example:

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'));

API

Preact-MUI has the same API with React MUI, then you can check tre React API and use the same with Preact-MUI.

MUI CSS React API

API Documentation

Preact Library

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

Appbar

import Appbar from 'preact-mui/lib/appbar';

<Appbar />

Read more: https://www.muicss.com/docs/v1/react/appbar

Button

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|true

Read more: https://www.muicss.com/docs/v1/react/buttons

Checkbox

import Checkbox from 'preact-mui/lib/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

import Container from 'preact-mui/lib/container';

<Container />
  * {Boolean} fluid=false|true

Read more: https://www.muicss.com/docs/v1/react/container

Divider

import Divider from 'preact-mui/lib/divider';

<Divider />

Read more: https://www.muicss.com/docs/v1/react/dividers

Dropdown Component

Dropdown

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

Read more: https://www.muicss.com/docs/v1/react/dropdowns

DropdownItem

import DropdownItem 'preact-mui/lib/dropdown-item';

<DropdownItem />
  * {String} link

Read more: https://www.muicss.com/docs/v1/react/dropdowns

Form

import Form from 'preact-mui/lib/form';

<Form />
  * {Boolean} inline=false|true
  * {Boolean} legend=false|true

Read more: https://www.muicss.com/docs/v1/react/forms

Grid Elements

Row

import Row from 'preact-mui/lib/row';

<Row />

Read more: https://www.muicss.com/docs/v1/react/grid

Col

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-offset

Read more: https://www.muicss.com/docs/v1/react/grid

Input

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|password

Read more: https://www.muicss.com/docs/v1/react/forms

Panel

import Panel from 'preact-mui/lib/panel';

<Panel />

Read more: https://www.muicss.com/docs/v1/react/panels

Radio

import Radio from 'preact-mui/lib/panel';

<Radio />
  * {String} name
  * {String} value
  * {String} label
  * {Boolean} checked
  * {Boolean} defaultChecked
  * {Boolean} disabled=false|true

Read more: https://www.muicss.com/docs/v1/react/forms

Select Component

Select

import Select from 'preact-mui/lib/select';

<Select />
  * {String} defaultValue
  * {String} label
  * {String|Object} style
  * {Boolean} disabled=false|true

Read more: https://www.muicss.com/docs/v1/react/forms

Option

import Option from 'preact-mui/lib/option';

<Option />
  * {String} value
  * {String} label

Read more: https://www.muicss.com/docs/v1/react/forms

Tabs Component

Tabs

import Tabs from 'preact-mui/lib/tabs';

<Tabs />
  * {Boolean} justified=false|true

Read more: https://www.muicss.com/docs/v1/react/tabs

Tab

import Tab from 'preact-mui/lib/tab';

<Tab />
  * {Boolean} selected
  * {String} label
  * {String} value

Read more: https://www.muicss.com/docs/v1/react/tabs

Textarea

import Textarea from 'preact-mui/lib/textarea';

<Textarea />
  * {String} defaultValue
  * {String} hint
  * {String} value
  * {Boolean} floatingLabel
  * {String} label
  * {String|Object} style

Read more: https://www.muicss.com/docs/v1/react/forms

Extra Components

Extra components that it's created on MUI Preact.js Library.

Modal

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'));

CSS Helpers

<!-- 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>

License

MIT