Material Design Lite (MDL) from Google is a really great thing if you want to create semantic websites with nice looking elements that are also fit for mobile devices.
But sooner or later you may face the problem that the components provided by MDL aren't covering all your needs. For example, you might need a component that mimics your phone's contact form when dealing with multiple similar bits of data, like phone numbers: add and remove, change type, set value. Or you might need an MDL-style file uploader, and so on.
This library provides different components as extensions to the official MDL library. Please read the The Material Design Lite license.
You can easily install it via the NPM package manager:
The easy way:
The "geek" way:
scssfiles and compress
README.mdfile for usage and syntax.
As of version 1.7.0 the
componentRegister has been introduced. Its purpose is to collect all the
instances and make them retrievable by DOM search:
<div class="mdl-file mdl-js-file mdl-file--floating-label" id="myFileInputElement"> <input type="file" name="avatar" id="avatar" multiple="multiple" accept=".jpg,.gif,.png,.svg"> <label class="mdl-file__label" for="avatar">Avatar</label> <span class="mdl-textfield__error">You can upload only images.</span> </div>
var materialComponent = componentRegister.getComponentById('myFileInputElement'); materialComponent.resetInput_();
Use it carefully! At Google the developers hid these component instances on purpose and not because they don't know how to code. But unfortunately, their concept has some disturbing behaviour:
componentHandler. But if you reach a component instance, all the properties and methods are public.
On one hand, the
componentRegistry makes it easy to get a component instance for a DOM element (if it exists
and is registered), but it also brings up the problem with the scope. So be very very careful.
reset()function for all the MDL-Ext components.
reset()function for the original MDL components.