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

Material Design Lite Ext (MDLEXT). Components based on the Google Material Design Lite framework.

Install

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

$ npm install --save material-design-lite

Install mdl-ext

$ npm install --save mdl-ext

Getting started

Use it in your page

<!DOCTYPE html>
<html>
<head>
  <title>Material Design Lite Extensions</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="node_modules/material-design-lite/material.css" />
  <link 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.min.js" charset="utf-8"></script>
<script type="text/javascript" src="node_modules/mdl-ext/lib/index.min.js" charset="utf-8"></script>
</body>
</html

Note: Always import mdl-ext css after material css.

Use it in your (Webpack) build

Import SASS files (e.g. following the SASS 7-1 pattern)

// 1. Application's SASS variables and overridden variables in 3'rd party SASS modules
@import 'stylesheets/variables';

// 2. Import MDL
@import '<path-to-node_modules>/node_modules/material-design-icons/iconfont/material-icons.css';
@import '<path-to-node_modules>/roboto-fontface/css/roboto-fontface.css';
@import '<path-to-node_modules>/material-design-lite/src/material-design-lite';

// 3. Import MDLEXT
@import '<path-to-node_modules>/mdl-ext/src/mdl-ext';

// 4. Your stuff
@import 'stylesheets/app/whatever';

If your main SASS file is ./src/main.scss, then your imports would be:

// 1. Application's SASS variables and overridden variables in 3'rd party sass modules
@import 'stylesheets/variables';

// 2. Import MDL
@import '../node_modules/material-design-icons/iconfont/material-icons.css';
@import '../node_modules/roboto-fontface/css/roboto-fontface.css';
@import '../node_modules/material-design-lite/src/material-design-lite';

// 3. Import MDLEXT
@import '../node_modules/mdl-ext/src/mdl-ext';

// 4. Your stuff
@import 'stylesheets/app/whatever';

Import material-design-lite and mdl-ext scripts 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

Accordion

A WAI-ARIA friendly accordion component.

Bordered fields

The Material Design Lite Ext (MDLEXT) bordered fields component demonstrates how you can create your own theme of MDL text fields.

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.

Notes

To see the MDLEXT components in action, open the demo/index.html in a browser. You can also download or clone a demo project from here: https://github.com/leifoolsen/mdl-webpack - which also demonstrates how you can self host Font Roboto and Material Icons in your web application.

Licence

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