WebComponent-MDL

WebComponent-MDL is a set of custom components build on top of Material Design Lite^v1.2.1

Browser Support

IE9	IE10	IE11	Chrome	Opera	Firefox	Safari	Chrome (Android)	Mobile Safari
B	A	A	A	A	A	A	A	A

Document

https://fieosa.github.io/webcomponent-mdl/

Requirements

This project is using Material Design Lite CSS library.

Basic html template:

<!DOCTYPE html>
<html>
  <head>
    <!-- Icon fonts required by Material-design-lite. -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <!-- Main css required by Material-design-lite. -->
    <!-- How to customize css theme ? Please check https://getmdl.io/customize/index.html -->
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.deep_purple-amber.min.css">
  </head>

  <body>
    <!-- My content -->
    <div>
    </div>

    <!-- Put js files at the end of <body> -->
    <script src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <!-- Path to dist/webcomponent-mdl.min.js . Please check 'Usage' below-->
    <script src="path/to/your/webcomponent-mdl.min.js"></script>
    
  </body>
</html>

Usage

npm install webcomponent-mdl will put dist/webcomponent-mdl.min.js inside node_modules/webcomponent-mdl/ of your project.

If you're working with a tool like Browserify, Webpack, RequireJS, etc, you can import the script.

import 'webcomponent-mdl' // ES2015
// or
require('webcomponent-mdl') // CommonJS
// or
define(['webcomponent-mdl'], function() {}) // AMD

If you're not using a module system, just place node_modules/webcomponent-mdl/dist/webcomponent-mdl.min.js somewhere where it will be served by your server, then put

<script src="/path/to/webcomponent-mdl.min.js"></script>

in your head element and you should be good to go.

Develop

Clone this repository.
Run npm install and npm start to run the demo page on localhost:3000.

For a listing of available components, as well as specific usage information, check out the Components page on the website.

License

MIT, see LICENSE.md for details.