gixx / mdl-components-ext Goto Github PK

Component extensions for the official Material Design Lite library

License: MIT License

CSS 9.81% JavaScript 65.46% HTML 22.75% Shell 1.97%

mdl-components-ext's Introduction

Introduction

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.

Requirements

Node.js / NPM

Installation

You can easily install it via the NPM package manager:

npm install

How to use

The easy way:

Check the Material Design Lite Component Extensions website for detailed instructions.

The "geek" way:

Run the following command to compile the scss files and compress css and js files:

library/create-package.sh

Include the generated files in your HTML. Refer to each components' README.md file for usage and syntax.

Extras

The `componentRegister`

As of version 1.7.0 the componentRegister has been introduced. Its purpose is to collect all the Material* component 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:

the developers can't retrieve the Component instances for a DOM element easily
the Component instances are protected only by the 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.

Plans for the future

Supply a standardized reset() function for all the MDL-Ext components.
If possible, add a reset() function for the original MDL components.

Change Log

Check the Change log

mdl-components-ext's People

Contributors

Stargazers

Watchers

Forkers

alekskorovin yurug fanyer hersonls mashiane

mdl-components-ext's Issues

Excellent!!!

Wow , thanks a lot for this.

There is a method to update all elements called componentHandler.upgradeDom();

I am creating most of my elements during run time and it works.

Ta!

I can't open file selection window when click on label

He man, how are you ?
So, I'm using here the same example in website:

Avatar

but when I click on avatar label, the selection windows does not open, it open just when I click in Icon.
there is any way to open selection window by clicking in label?

another thing, I want to change the Icon, put other one!
there is any way to do it?

thanks man and congratulations for the project, it's so useful!

Clearing an input element makes it not changeable.

I use this line of code to clear the text input field generated by your library around a file input field:

inputFields.value = ''

And after applying this code the input field doesn't change anymore when I choose a file. Its value changes, but not visually.
How to correctly clear this field using your library?

Avatar component doesn't show upload previews correctly when there are multiple avatar components on a page

Reproduce:

Have multiple avatar components on a page.
In the first, choose a file to upload, then click checkmark.
In the second, choose a different file to upload, then click checkmark.

Expected result:

Each avatar component shows a preview of its own file-to-be-uploaded.

Actual Result:

The first avatar component shows a preview of the file-to-be-uploaded as usual.

The second avatar component shows a preview for the file that was selected in the first one.

I've reproduced this on your site:

http://mdl.gixx-web.com/components-ext.html#cards-section

as well as on mine, using the latest version of mdl-components-ext from this repo. Reproducible in every browser I've tried (Chrome and Fx on desktop, Chrome and Fx on mobile, Safari on mobile).

Avatar component doesn't display on some mobile devices

I've tested with:

Safari on iOS 8 on an iPhone 4S

Firefox on iOS 8 on an iPhone 4S

Safari on iOS 9 on an iPhone 6+

Chrome on iOS 9 on an iPhone 6+

Chrome 48.0.2 on Android 5.0.2

On both iPhones it never appears at all, leaving a large blank square on both my site and your demo site.

On the Android device it appears about 30% of the time, judged from many refreshes and fresh page loads on my site, and more often on your demo site.

Has anyone else experienced this?

componentHandler is not defined

I am receiving an error, Uncaught ReferenceError: componentHandler is not defined. I pulled the two minified files out of the download folder off your website. I saw another issue with the same problem (#3) but I couldn't figure out if that user used a CDN to resolve his issue, and if so, where he got that CDN from.

Any and all help greatly appreciated.

publish to npm

would you consider publishing to npm.

License of certain files

You seem to have removed the license on a few files in your repository. This is clearly against the license provided. Apache license 2.0 Section 4, like in whole is violated here.

It would be great if the open source community could adhere to the licenses other things they use are provided under. Otherwise, the licenses don't really mean anything.

Thanks for understanding.

Garbee

Wrong material-design-lite version

Hi, I tried to use your library and I saw you set version 3.0.0 in material-design-lite dependence in package.json. I made some researches and don't saw any material-design-lite package in NPM with this version.

So I made a PR with the latest version 1.3.0.

Can you confirm if is really wrong or if is another package that I can't saw?

how to do cross everything testing

This works well for me.

But i need to test things, and i was wondering what other devs use ?

File input console error

I trying to use the input file but I getting this erro on console:

material.components.ext.min.js:9 Uncaught ReferenceError: componentHandler is not defined

test on v1.4

[Doubt] - How can I reset input file after submit?

Hey, how are you ?
I'm trying to reset my input file after a submit in angular component.
when I reset all inputs inside of form, the input text with filename keeps inside of it.
and when I removed the input text value with JS code (ex: obj_input.value = '';), the input don't work anymore.
do you know any way to reset the input file after a submit form ?

online examples of mdl-components-ext

Hi,
mdl-components-ext sounds interesting for me. Do you have mdl-components-ext running online somewhere to get an impression of it?
Regards
Sabine