Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/berndwessels/preact-mdc
material design components for preact using material-components-web sass styles (for live demo click the link below)
https://github.com/berndwessels/preact-mdc
material material-components material-components-web material-design material-design-components mdc preact preact-components
Last synced: about 5 hours ago
JSON representation
material design components for preact using material-components-web sass styles (for live demo click the link below)
- Host: GitHub
- URL: https://github.com/berndwessels/preact-mdc
- Owner: BerndWessels
- License: mit
- Created: 2017-04-10T23:18:53.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-04-12T23:39:24.000Z (over 7 years ago)
- Last Synced: 2024-11-15T23:06:15.014Z (1 day ago)
- Topics: material, material-components, material-components-web, material-design, material-design-components, mdc, preact, preact-components
- Language: JavaScript
- Homepage: https://berndwessels.github.io/preact-mdc-demo/
- Size: 30.3 KB
- Stars: 24
- Watchers: 4
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# preact-mdc
## Overview
This is a [preact](https://github.com/developit/preact) integration of the awesome [material-components-web](https://github.com/material-components/material-components-web) material design components library.
## material-design-components-web
This library is the successor of the awesome but now depricated [material-design-lite](https://github.com/google/material-design-lite) library.
## Goals
We try to provide all available components from `material-design-components-web` as pure `preact` components.
We try to not use any of the MDC `javascript` code but only use the MDC `sass` styles.
## Components
- Button
- Card
- CardAction
- CardActions
- CardHorizontalBlock
- CardMedia
- CardMediaItem
- CardPrimary
- CardSubtitle
- CardSupportingText
- CardTitle
- Checkbox
- CheckboxLabel
- Drawer
- DrawerContent
- DrawerHeader
- DrawerToolbarSpacer
- Fab
- FormField
- IconToggle
- List
- ListDivider
- ListGroup
- ListGroupDivider
- ListGroupHeader
- ListItem
- ListItemDetail
- ListItemText
- ListItemTextPrimary
- ListItemTextSecondary
- Radio
- Snackbar
- Switch
- TextField
- Toolbar
- ToolbarRow
- ToolbarSection
- ToolbarTitle
## Demo
- Here is a [demo project](https://github.com/BerndWessels/preact-mdc-demo) showing all the components and how to use them.
- Here is a [live demo](https://berndwessels.github.io/preact-mdc-demo/) of that project.
## Usage
At the moment we directly provide the components written in ES6 as individual modules.
- Add this library to your project
` npm install --save preact-mdc`
This requires the following depenencies in your project:
```json
"material-components-web": "0.8.0",
"material-design-icons": "^3.0.0",
```
### ES6 NPM webpack
Since `preact-mdc` components are ES6 components and used directly from the npm package you might need to tweak your `webpack.config`.
Here is an example:
```js
module: {
noParse: /\.min\.js/,
rules: [{
test: /\.jsx?$/,
exclude: [/node_modules(?![\/\\]preact-mdc)/],
use: [{
loader: 'babel-loader',
options: {
presets: [
['es2015', {loose: true, modules: false}]
],
plugins: [
'transform-class-properties',
'transform-object-rest-spread',
['transform-react-jsx', {pragma: 'h'}]
]
},
}]
}
```
# Contributing
You are very welcome to report issues, make PRs and become a contributor.