any kind of documentation to disable the effect from the md-button?
Vue material
Thanks
Here is a working example of md-button with disabled attribute. The button becomes disabled if loading or if the form is invalid using vuelidate validation library.
<md-button #click.prevent="signup" class="md-accent md-raised" :disabled="loading || $v.$invalid">Sign up</md-button>
Related
I'm trying to create a md-menu inside of a md-toolbar and have it open on click. My code for the button that would open the dropdown menu is below:
<md-button aria-label="Open menu" class="md-icon-button" ng-show="(data.isAdmin || getUIActions('context').length > 0) && options.omitHeaderOptions != 'true'" ng-click="$mdMenu.open()">
<md-icon md-menu-origin id="adminMenu">menu</md-icon>
</md-button>
I have two questions --
1) In a previous iteration of this code, I had ng-if on my md-button. With ng-if, the dropdown menu was always open and could not be closed. When I switched to ng-show or took out the condition completely, the menu is gone. Is there a reason why ng-show works and ng-if doesn't?
2) I copied the code for ng-click directly from the angular material documentation, but cannot seem to get the click to open up the menu. Am I missing something?
I was using v.1.1.0 when I encountered this issue. Once I updated to v.1.1.5, the problem got fixed.
We have an Angular site using UI Bootstrap & UI-Router
When in collapsed mode, if you click any open with a drop down, the menu re-collapses before the user can see the dropdown options.
Here's a plunker:
https://plnkr.co/edit/73s4kuFR2c9EuhMd6G4l
.... Why is SO making me paste code if I have a plunkr link ??
See plunker link for code example.
What am I overlooking?
-Thanks
You must remove ng-click="navCollapsed = true" from your div.collapse.navbar-collapse
It should look like this:
<div class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'">
It will stop the wrong behavior.
I want to customize the md-chip color randomly without using css style. Is there any attribute in the md-chip directive?
<md-chips placeholder="Add more tags here"
secondary-placeholder="Enter tags here" ng-model="contact.contact.tags.attrVal" md-on-add="contact.createTag(contact.contact)" md-on-remove="contact.removeTag(contact.contact)"></md-chips>
you can use ng-style. i.e
ng-style={background-color:'red'}
See Issue 8692 on Angular Material's github. It appears to be a known issue that is being worked on currently.
I'm working with Angular Materia 0.10.1.
I have a md-button nested inside a md-list-item. Both elements triggers the ripple effect when clicked, and when I click the button, it triggers the ripple effect on both elements at the same time. I want to have ripples on the button or on the list element only, but never both at the same time.
<md-list flex>
<md-list-item ng-click="a('a')">
<p>Some name</p>
<md-button class="md-accent md-raised" ng-click="b('b', $event)">Do something</md-button>
</md-list-item>
</md-list>
I've used $event.stopPropagation() but it doesn't stop the ripples in the same way it stops nested click events.
This Plunker can demonstrate it better.
It seems to be something built into the md-primary class and how it works with the list item. If you look at the examples there are a few that have side buttons that do not exhibit this behavior
by simply swapping the class on your button to md-secondary it seems to fix your issue (styling is a separate one now though)
<md-button class="md-secondary md-raised" ng-click="b('b')">Do something</md-button>
http://plnkr.co/edit/4fo8u190gpKyoHznVbFM?p=preview
Alternatively, the example uses md-icon instead of buttons and that seems to work too.
I have used the following tag from angular material design to display a button icon. But i dont get the icon on the webpage. can anyone please help me with this.
<md-button class="md-icon-button" aria-label="Settings">
<md-icon md-svg-icon="bower_components/material-design-icons/editor/svg/production/ic_insert_link_24px.svg"></md-icon>
</md-button>
The path is right though and scripts are attached to index.html.
Looks like you are using the wrong attribute to set your icon source.
According to the docs:
https://material.angularjs.org/#/api/material.components.icon/directive/mdIcon
You should be using md-svg-src attribute if you want to specify a source path for your icon - md-svg-icon is used to specify as a string name from the internal cache.
For Example:
<md-button class="md-icon-button" aria-label="Settings">
<md-icon md-svg-src="bower_components/material-design-icons/editor/svg/production/ic_insert_link_24px.svg"></md-icon>
</md-button>
If the icon still does not appear, check if the source path is relative to the location of your html document.