Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/luisvinicius167/preact-mui
Preact Components for MUI CSS framework.
https://github.com/luisvinicius167/preact-mui
Last synced: about 2 months ago
JSON representation
Preact Components for MUI CSS framework.
- Host: GitHub
- URL: https://github.com/luisvinicius167/preact-mui
- Owner: luisvinicius167
- Created: 2016-12-07T21:07:53.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-04-08T12:30:13.000Z (over 7 years ago)
- Last Synced: 2024-11-02T09:33:41.703Z (2 months ago)
- Language: JavaScript
- Homepage: http://preact-mui.surge.sh/
- Size: 98.6 KB
- Stars: 37
- Watchers: 4
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-preact - Preact MUI - The MUI CSS Preact library. (Uncategorized / Uncategorized)
README
# preact-mui
[](https://www.npmjs.com/package/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 **](http://preact-mui.surge.sh/)
### Get Started
To use MUI Preact you must include the MUI CSS and JS file in your HTML payload:
```html
```
#### Install
`npm install preact-mui`
#### Using Components
```javascript
// 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:
```javascript
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 (
button
);
}
}
render(, 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.
---
## 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
```jsx
import Appbar from 'preact-mui/lib/appbar';
```
Read more: https://www.muicss.com/docs/v1/react/appbar
#### Button
```jsx
import Button from 'preact-mui/lib/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 'preact-mui/lib/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 'preact-mui/lib/container';
* {Boolean} fluid=false|true
```
Read more: https://www.muicss.com/docs/v1/react/container
#### Divider
```jsx
import Divider from 'preact-mui/lib/divider';
```
Read more: https://www.muicss.com/docs/v1/react/dividers
#### Dropdown Component
##### Dropdown
```jsx
import Dropdown from 'preact-mui/lib/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
```jsx
import DropdownItem from 'preact-mui/lib/dropdown-item';
* {String} link
```
Read more: https://www.muicss.com/docs/v1/react/dropdowns
#### Form
```jsx
import Form from 'preact-mui/lib/form';
* {Boolean} inline=false|true
* {Boolean} legend=false|true
```
Read more: https://www.muicss.com/docs/v1/react/forms
#### Grid Elements
##### Row
```jsx
import Row from 'preact-mui/lib/row';
```
Read more: https://www.muicss.com/docs/v1/react/grid
##### Col
```jsx
import Col from 'preact-mui/lib/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 'preact-mui/lib/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
```jsx
import Panel from 'preact-mui/lib/panel';
```
Read more: https://www.muicss.com/docs/v1/react/panels
#### Radio
```jsx
import Radio from 'preact-mui/lib/panel';
* {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
```jsx
import Select from 'preact-mui/lib/select';
* {String} defaultValue
* {String} label
* {String|Object} style
* {Boolean} disabled=false|true
```
Read more: https://www.muicss.com/docs/v1/react/forms
##### Option
```jsx
import Option from 'preact-mui/lib/option';
* {String} value
* {String} label
```
Read more: https://www.muicss.com/docs/v1/react/forms
#### Tabs Component
##### Tabs
```jsx
import Tabs from 'preact-mui/lib/tabs';
* {Boolean} justified=false|true
```
Read more: https://www.muicss.com/docs/v1/react/tabs
##### Tab
```jsx
import Tab from 'preact-mui/lib/tab';
* {Boolean} selected
* {String} label
* {String} value
```
Read more: https://www.muicss.com/docs/v1/react/tabs
#### Textarea
```jsx
import Textarea from 'preact-mui/lib/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
```javascript
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 (
{
console.log('Modal Closed.')
}
}>
I am a children of Modal Component
Close Modal
Open Modal
);
}
}
render(, document.getElementById('example'));
```
## CSS Helpers
```html
Body2
Body1
Caption
```
### License
[MIT]
[Preact]: https://github.com/developit/preact
[MUICSS]: https://facebook.github.io/react/docs/context.html
[MIT]: http://choosealicense.com/licenses/mit/