jadjoubran / angular-material-design-lite Goto Github PK
View Code? Open in Web Editor NEWA tiny Angular wrapper for Material Design Lite
Home Page: https://desolate-fjord-7338.herokuapp.com/
License: MIT License
A tiny Angular wrapper for Material Design Lite
Home Page: https://desolate-fjord-7338.herokuapp.com/
License: MIT License
I am trying to start the
<mdl-switch label="Notifications" ng-model="attendee.name" mdl-upgrade></mdl-switch>
as checked, but it's not working. Is there an issue about that?
Frist, so happy to see this being developed - thanks. With the progress bar, you are watching the progress and updating the control accordingly. With the switch, this doesn't seem to be the case. With angular material design, an update to the model causes the switch ui to refresh. Do you have plans to provide this?
I have created two plunker samples.In the first i tried to apply a class by name active and it applied and here is the demo for it-http://plnkr.co/edit/0txN0C14GPl0ljrpsDlr?p=preview
But when i try to apply "is-active" class it is not applying.why is that so? Here is the plunker demo for it-http://plnkr.co/edit/oNRL4Rc6lmjmaLGXX54H?p=preview
Hi,
Any chance of porting your module as an npm package?
I'd like to get rid of bower and use only npm for external libraries (mainly because I'm playing with Webpack which is better used with npm modules only).
Thanks!
Hi
I am facing an issue using MDL with Angularjs in the ngView
For example on Textfields, the ripple.js is launched before the end of the ng-repeat process into the ngView. It is recommended to launch the function componentHandler.upgradeAllRegistered() when all is finished on dynamic websites but can't find anyway for that.
Best way seems to have a directive linked to the "$last" of ngRepeat elements :
.directive('onFinishRender', function() {
return {
restrict: 'A',
link: function(scope, element, attr) {
if (scope.$last === true) {
element.ready(function() {
componentHandler.upgradeAllRegistered()
});
}
}
}
Perhaps you can add this directive in all the MDL directives ?
I have spent most of the day converting my project from Angular Material over to the new release of material design lite - and it seems to be working very well - in fact a lot better than the Angular design version.
As it seems to be working well, could you explain what benefits using your angular-material-design-lite would bring?
Check #9 for more info
With the current directive mdl-text-field there is no possibility to have the "list" attribute for the input or "type".
Best would be that the directive must include the input to be able to do so.
Check Lumx project that gives that possibility for example.
Hello, great job and thanks for it. I have a questions, angular-material-design-lite suport mdl-layout__drawer? ho ca I use it?.
Thanks.
I noticed the compiled button directive looks like this inside ui-view
<mdl-button-raised class="ng-isolate-scope">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" ng-class="ngClass" ng-transclude=""><span class="ng-scope">Get Started</span>
</button>
</mdl-button-raised>
and like this outside it
<mdl-button-raised class="ng-isolate-scope">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" ng-class="ngClass" ng-transclude="" data-upgraded=",MaterialButton,MaterialRipple">
<span class="ng-scope">Accent Raised button</span><span class="mdl-button__ripple-container">
<span class="mdl-ripple is-animating" style="width: 394.688px; height: 394.688px; transform: translate(-50%, -50%) translate(67px, 31px);"></span>
</span>
</button>
</mdl-button-raised>
The result is inside ui-view the ripple effect doesn't work and the active state of the button ends to looks like this:
Here the plunker
https://plnkr.co/edit/AXfuSyOXlGyM3uK9ELKJ?p=preview
Fore some reason anchors won't work when using a small screen (or scaling the browser window)
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Material Design Lite</span>
<nav class="mdl-navigation">
<a href="#overview" class="mdl-navigation__link">Overview</a>
<a href="#types" class="mdl-navigation__link">Custom Types</a>
</nav>
</div>
Tested on both:
Installation
bower install angular-materail-design-lite
must be
bower install angular-material-design-lite
when i write a template page
and i use the ngRute
the ui is worked but the input event not working
Check #9 for more info
all mdl components work wihtout ng-view but with ng-view did'nt work any component...
please help
How to use input Types in mdl angular with validation errors????
When will be available?
One thing that might be annoying is that if you disable a button with ng-disabled but the ripple class is applied then it will still apply the ripple effect when the button is pressed even when disabled. My solution was to change the ng-class which applied the ripple effect to include the check for the disable value.
Hi - It's nothing major - but have a look at the label for the radio buttons the demo shows both as being set to "male"
Hi, I appreciated this work, but currently the directives are 7, Any plan to extend the support soon?
Hi.,
Does this have any Angular 2.0 version ?
I think it would be better to have an attribute for the "design" to include :
-raised
-fab
-mini-fab
-icon
-colored
-primary
-accent
and why not ripple
Everything could be into a single attribute in which you can put a list
Click me
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.