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:
Install
npm install preact-mui
Using Components
// Access components individually for smaller build files (RECOMMENDED);;; // Access all components from preact-mui module; // Preact-MUI also supports ES5 syntaxvar preactMui = ;var Appbar = preactMuiAppbar;var Button = preactMuiButton;var Container = preactMuiContainer;
Real life example:
; ;;; Component { return <div> <Appbar></Appbar> <Container fluid=true> <Button color="primary">button</Button> </Container> </div> ; } ;
API
Preact-MUI has the same API with React MUI, then you can check tre React API and use the same with Preact-MUI.
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
;;;; /** * @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 */Component { return <div> <Appbar></Appbar> <Container fluid=true> <Modal openedBy="buttonModal" closedBy="buttonClose" onClose= { console } > <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> ; } ;
CSS Helpers
<!-- animation --> <!-- alignment --> <!-- depth helpers --> <!-- float helpers --> <!-- toggle helpers --> <!-- responsive utilities --> <!-- typograpy -->Body2Body1CaptionMenuButton <!-- text color --> <!-- background color --> <!-- user select --> <!-- appbar dimension helpers --> <!-- list helpers -->