WebComponent-MDL is a set of custom components build on top of Material Design Litev1.2.1
| IE9 | IE10 | IE11 | Chrome | Opera | Firefox | Safari | Chrome (Android) | Mobile Safari |
|---|---|---|---|---|---|---|---|---|
| B | A | A | A | A | A | A | A | A |
https://fieosa.github.io/webcomponent-mdl/
This project is using Material Design Lite CSS library.
<!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>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() {}) // AMDIf 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.
- Clone this repository.
- Run
npm installandnpm startto run the demo page onlocalhost:3000.
For a listing of available components, as well as specific usage information, check out the Components page on the website.
MIT, see LICENSE.md for details.