Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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 1 month 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 (about 1 month 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.