Skip to content
💥 A collection of Preact Components that encapsulate Google's Material Design Lite.
Branch: master
Clone or download
Latest commit cc566d5 Dec 19, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Add examples for Icon, Button, Card, and Layout (#39) Dec 19, 2017
test Set input as invalid if errorMessage is set (#31) Feb 25, 2017
.editorconfig Finally migrating this to a proper NPM module + repo. Jan 27, 2016
.eslintignore Finally migrating this to a proper NPM module + repo. Jan 27, 2016
.eslintrc Update all devDependencies (fixes travis build issues) Apr 14, 2016
.gitignore Finally migrating this to a proper NPM module + repo. Jan 27, 2016
.npmignore Finally migrating this to a proper NPM module + repo. Jan 27, 2016
.travis.yml Finally migrating this to a proper NPM module + repo. Jan 27, 2016
LICENSE
README.md
docs.md
karma.conf.js
package.json 2.2.2 Sep 22, 2017
rollup.config.js

README.md

preact-mdl

NPM travis-ci

A collection of Preact Components that encapsulate Google's Material Design Lite.

Quick Start

Edit Preact Material Design

Grab the App Skeleton from JSFiddle, Codepen, or Code Sandbox

Using TypeScript? preact-mdl-example is an instant full project setup.

Documentation

Installation

npm install --save material-design-lite preact-mdl

What does it look like?

See for yourself - preact-mdl powers ESBench and Nectarine.

Here's some live-action demos:


Usage

  • Add MDL stylesheets to your html
<!DOCTYPE html>
<html style="height: 100%; width: 100%;">
<head>
    <meta charset="utf-8">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <title>Preact-mdl Example</title>
</head>
<body style="height: 100%; width: 100%;">
  <script src="/bundle.js"></script>
</body>
</html>
  • Import mdl module and components from preact-mdl
import { h, Component } from 'preact';
import mdl from 'material-design-lite/material';
import { Button } from 'preact-mdl';

export default class MyButton extends Component {
  render() {
    return(
      <div>
        <Button>I am button!</Button>
      </div>
    )
  }
}

Demos

For now, browse these Open Source projects using preact-mdl:


License

MIT

You can’t perform that action at this time.