webcomponent-mdl

1.0.9 • Public • Published

Maintenance Status

WebComponent-MDL is a set of custom components build on top of Material Design Litev1.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.

Package Sidebar

Install

npm i webcomponent-mdl

Weekly Downloads

1

Version

1.0.9

License

MIT

Last publish

Collaborators

  • fieosa