Package Exports

mdl-ext

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mdl-ext) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

mdl-ext

Components based on the Google Material Design Lite framework.

Install

Install mdl-ext

$ npm install --save mdl-ext

If you haven't done so already, install Material Design Lite and Material Design Icons.

$ npm install --save-dev material-design-icons
$ npm install --save material-design-lite

Optionally install Font Roboto

$ npm install --save-dev roboto-fontface"

Getting started

Use it in your page

<!DOCTYPE html>
<html>
<head>
  <title>Material Design Lite Extensions</title>
  <link type="text/css" rel='stylesheet' href='node_modules/material-design-icons/iconfont/material-icons.css'>
  <link type="text/css" rel='stylesheet' href='node_modules/roboto-fontface/css/roboto-fontface.css'>
  <link type="text/css" rel="stylesheet" href="node_modules/material-design-lite/material.css" />
  <link type="text/css" rel="stylesheet" href="node_modules/mdl-ext/lib/mdl-ext.min.css" />
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
  <main class="mdl-layout__content">
  </main
</div>
<script type="text/javascript" src="node_modules/material-design-lite/material.js" charset="utf-8"></script>
<script type="text/javascript" src="node_modules/mdl-ext/lib/index.min.js" charset="utf-8"></script>
</body>
</html

Use it in your (Webpack) build

Import SASS files (you should follow the SASS 7-1 pattern)

// 1. Override variables in 3'rd party sass libs
@import 'stylesheets/variables';

// 2. Import Components
@import 'roboto-fontface/css/roboto-fontface.css';
@import 'material-design-lite/src/material-design-lite';
@import 'mdl-ext/src/selectfield/selectfield';

// 3. ...
@import 'stylesheets/app/whatever';

Import material-design-lite and mdl-ext in your "main" js file

import 'material-design-lite/material';
import 'mdl-ext';

... or require material-design-lite and mdl-ext

require('material-design-lite/material');
require('mdl-ext');

Components

Selectfield

The Material Design Lite Ext (MDLEXT) select field component is an enhanced version of the standard [HTML <select>] (https://developer.mozilla.org/en/docs/Web/HTML/Element/select) element.

Components under development

Accordion
Bordered input fields
File input

Notes

You can download or clone a demo project from here: https://github.com/leifoolsen/mdl-webpack

Licence

This software is built with the Google Material Design Lite framework, which is licenced under an Apache-2 licence.