According to md-tab Documentation we can have custom md-tab-label, which I'm trying to do like this:
<md-tab-label class="my-label">
Label
</md-tab-label>
My css:
.my-label{
background: #40FF00;
}
However, the background color is not appearing for tab labels.
Am I doing something wrong ?
So, I was doing this the wrong way.
The correct way is:
Define your markup
Then add css
In this case, the css can be like:
all-tabs {font-size: 20px;}
.demo-tab {
color:green;
}
and in html:
<md-tab-label>
<all-tabs class="demo-tab"> {{$index+1}} </all-tabs>
</md-tab-label>
Resulting tabs:
Related
Is there a way to autosize just the dropdown list in a angularjs listbox?
I don't want the top part to resize, just the dropdown.
Something like this:
enter image description here
Try using this html and css code as your basis to solve your problem.
Markup
<div class="wrapper">
<select class="dropdown">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
</div>
CSS
.wrapper{
width:150px;
overflow:hidden;
}
.dropdown{
width:150px;
}
.dropdown:focus{
width:auto;
}
I want to use ng-tags-input in my project.
I try to set diffrent color for each tag according to color property object in array.
Here is plunker I am working on.
For this purpose I need to override tag-item css class in ng-input template.
Here is the example of ng-input template:
<script type="text/ng-template" id="tag-template">
<div class="tags-input" ng-style="{background: data.color}">
<span>{{$getDisplayText()}}</span>
<a class="remove-button" ng-click="$removeTag()">✖</a>
</div>
in this row I try to override tags-input css class:
<div class="tags-input" ng-style="{background: data.color}">
And here is result I get:
as you can see on left and right edges not colored.
Any idea what I am doing wrong?And how to override the tags-input css class??
If you look at the markup, you'll see that the .tags-input div where you apply your background color style is embedded into an li element, which has a laft and right padding of 5px. That's why the color is not applied on the full width of the button.
So, make sure to apply your own stylesheet after the ng-tags-input stylesheet, and override some CSS rules in order for the lito have no padding, and for the div with the background color to have a padding instead:
/* override default tag styles for colors to look less ugly */
tags-input .tags .tag-item {
padding: 0;
height: 27px;
}
.tags-input {
padding: 0 5px;
border-radius: 2px;
}
Here's your plunkr modified to make that happen.
I was using angular material. I find it very cool, well designed and user friendly.
I was trying to change or remove the calendar icon on datepicker directive.
<md-datepicker ng-model="myDate" md-placeholder="Enter date" ></md-datepicker>
The default icon is very good but i want to skip the icon in some case. well i can use svg icon using md-icon like this
<md-icon md-svg-src="calendar.svg"></md-icon>
Here is my sample plunker. Suggest me some idea to change/remove the default icon on datepicker.
Angular Material 1.1.0 has a solution, although it seems undocumented.
From angular-material/modules/js/datepicker/datepicker.js:
* #param {String=} md-hide-icons Determines which datepicker icons should be hidden. Note that this may cause the
* datepicker to not align properly with other components. **Use at your own risk.** Possible values are:
* * `"all"` - Hides all icons.
* * `"calendar"` - Only hides the calendar icon.
* * `"triangle"` - Only hides the triangle icon.
Usage:
<md-datepicker ng-model="myModel" md-hide-icons="calendar"></md-datepicker>
The original question was how to "to change or remove the calendar icon on datepicker directive."?
I just know how to remove it.
You can remove the calendar icon by simply putting the following in a CSS file and adding it to your page:
.md-datepicker-button {
display: none !important;
}
.md-datepicker-input-container {
margin-left: 0 !important;
}
Here is a better solution.
create a button with another icon and place it in the same div with datepicker
<div flex=40>
<md-icon md-svg-src="calendar.svg"></md-icon>
<md-datepicker ng-model="myDate" md-placeholder="Enter date" ></md-datepicker>
</div>
set the button postion to cover the orginal datepicker icon
<div flex=40>
<md-icon style="position:absolute;margin-top:15px; left:20px" md-svg-src="calendar.svg"></md-icon>
<md-datepicker ng-model="myDate" md-placeholder="Enter date" ></md-datepicker>
</div>
set the the original datepicker icon to apparent.
.md-datepicker md-icon {color: rgba(0,0,0,0) !important;}
.md-datepicker-open .md-datepicker-calendar-icon {fill:rgba(0,0,0,0)}
.md-datepicker-button.md-icon-button {
display: none;
}
This one works for me.
They do not provide an API option for specifying the icon, and as you can see from datepicker template.
The md-calendar icon is hard-coded inside the template. I suggest creating yourself a directive based from theirs and change it directly.
The solution provided by Ralph is kind of complex which is i have to create a new directive from their directive. I found a simple solution to this problem. The template of this md-calendar is using a button with an icon like this
<md-button class="md-datepicker-button md-icon-button" type="button"
tabindex="-1" aria-hidden="true"
ng-click="ctrl.openCalendarPane($event)">
<md-icon class="md-datepicker-calendar-icon" md-svg-icon="md- calendar">
</md-icon>
</md-button>
So i change the css of class md-datepicker-buttonand hide the button
.calendarDiv .md-datepicker-button{
display: none;
}
and use another custom icon like this
<md-icon md-svg-src="calendar.svg"></md-icon>
The icon isn't functional as default iconbut this would solve my problem .
This is my sample solution plunker.
You can change and hide the icon in the following way:
First give the md-datepicker an id (or class to target more then one):
<md-datepicker id="my-date-picker"></md-datepicker>
Then you can target the icon in css and change the color, size, display etc:
#my-date-picker .md-datepicker-calendar-icon {
color: green;
display: none;
}
md-datepicker now has a configuration attribute for hiding the icons. From the docs:
md-hide-icons String
Determines which datepicker icons should be hidden. Note that this may cause the datepicker to not align properly with other components. Use at your own risk. Possible values are:
"all" - Hides all icons.
"calendar" - Only hides the calendar icon.
"triangle" - Only hides the triangle icon.
Using CSS to override the default triangle icon (I want the calendar icon on the right) using a custom theme with the FontAwesome icon
/* override md material*/
.md-custom-theme .md-datepicker-input-container {
width: 100%;
border: none;
}
.md-custom-theme .md-datepicker-expand-triangle {
border:none;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-transform: none;
transform: none;
top: 6px;
right:0;
}
.md-custom-theme .md-datepicker-expand-triangle:before {
content: "\f073";
}
Just remove date-picker toggle for icon remove(I am using latest files of Angular Material)
<mat-form-field appearance="outline" (click)="from_date.open()">
<mat-label>From Date</mat-label>
<input matInput [matDatepicker]="from_date">
<mat-datepicker-toggle matSuffix [for]="from_date"></mat-datepicker-toggle>
<mat-datepicker #from_date></mat-datepicker>
</mat-form-field>
Remove this line
<mat-datepicker-toggle matSuffix [for]="from_date"></mat-datepicker-toggle>
You can use mat-icon in combination with mat-datepicker-toggle to change the calendar icon of mat-datepicker
<input [matDatepicker]="basicDatepicker">
<mat-datepicker-toggle [for]="basicDatepicker">
<mat-icon matDatepickerToggleIcon>
mouse
</mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #basicDatepicker></mat-datepicker>
instead if mouse you can use your costume icon by:
<mat-icon fontIcon="myCustomIcon"> </mat-icon>
For reference : https://www.angularjswiki.com/material/datepicker/
I know how to remove it.
Just copy and paste the code below in your css
div.layout-align-start-start.layout-row>.md-icon-button.md-button.md-ink-ripple:not(.md-raised){
display: none;}
Is there a way to set different background colors for different tabs in md-tabs ?
The default is no color as can be seen in tabs demo
I tried <md-tabs background-color="green"> but it's not working
AngularJS Material design (md) tabs, md-tabs background color is transparent and uses the background color of your main container. Try to add CSS class for md-tabs .
Added background to entire md-tabs
md-tabs {
background: red;
border: 1px solid #e1e1e1; }
By adding CSS childs to md-tab class, you can see different colors for different tabs.
.md-tab:first-child{background: green; }
.md-tab:nth-child(2){background: pink; }
.md-tab:nth-child(3){background: blue; }
fiddle
https://jsfiddle.net/cxf3otz9/
codepen
http://codepen.io/anon/pen/zGNEyw
Upon evaluating source code, i came to there a way to achieve dynamic content formatting for tab titles. To get that, please write the code as below
<md-tabs>
<md-tab>
<md-tab-label>
<span ng-class="......">
Title
</span>
</md-tab-label>
<md-tab-body>
content
</md-tab-body>
</md-tab>
</md-tabs>
I have a list of items (each of which includes multiple elements) where each item is clickable and switches view. Is there a way to get the ripple effect on the whole md-item-content? I tried class="ripple" but that was not sufficient.
<md-content>
<md-list layout="column" md-padding>
<md-item ng-repeat="resto in list.data.recommendations">
<a ui-sref="resto({qname: resto.qname})" class="ripple">
<md-item-content id="resto{{$index}}">
...
If you want to use ripple effect on specific elements you can use md-ink-ripple.
<div md-ink-ripple></div>
Just add a md-ink-ripple directive and .md-clickable class to the <md-list-item> element:
<md-list-item md-ink-ripple class="md-clickable">
<p>Foo</p>
</md-list-item>
Also you can set the font-weight to 500 if you wish (that is how a default clickable-item looks like).
The other answers cover most of the cases but you can also customize the color of the ripple effect by using
<md-list-item md-ink-ripple="#03A9F4">
<p></p>
</md-list-item>
This will give a light blue ripple color.
The team behind Angular Material wanted to keep this internal and reduce customization which is why they haven't documented it well. However, I thought it was a useful customization. Hope it helps! Cheers!
Actually, there's lack of documentation over this.
I was searching for a solution and found your ask here, so I went to check their source code.
You can use md-list > md-list-item with several restrictions. In your case, the idea is to get close to their docs menu, on sidenav (theirs is a directive called menu-link, on the link itself), and I've acomplished with some modifications in my original code (which were close to yours):
<md-list>
<md-list-item
ng-repeat="section in ::admin.sections"
ng-class="{
'active': $state.includes(section.active),
'disabled': section.disabled
}"
ng-click="!section.disabled && $state.go(section.state)">
<span ng-bind="::section.label"></span>
</md-list-item>
</md-list>
Basically, isn't all elements that are accepted as action-triggers inside md-list-item. md-checkbox and md-switch are the only childs that are accepted to do a process, inside preLink function on md-list-item directive.
The other way is to put a ng-click on the md-list-item itself, or in a child element, inside it.
The preLink process is a wrapper, using a "non-styled" button that do a "proxy" on the click, and visually acomplishes the ripple effect.
Other things, like attributes, too, aren't being transferred to this "proxy", so a disabled cannot be used directly, you need to simulate its results. In my case, I interrupt the ng-click action, and put a class into the element.
I would suggest using md-button if you want ripples instead of the anchor. Then just do your ui-router state change in the controller.
See https://github.com/angular/material-start/blob/master/app/index.html#L30 for an example.
<md-list layout="column" md-padding>
<md-item ng-repeat="resto in list.data.recommendations">
<md-button ng-click="vm.navigateToResto(resto)" ng-class="{'selected' : it === vm.selected }" id="resto{{$index}}">
...
</md-button>
</md-item>
</md-list>
Here is the best way to do it:
<div md-ink-ripple class="ripple">Div like an md-button</div>
add to your div md-ink-ripple directive
add ripple class to your div:
`
.ripple {
position: relative;
&:active > .wave {
animation: ripple 0.25s;
}
.wave{
position:absolute;
width:100%;
height:100%;
background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
background-size: 0 0;
top:0;
left:0;
transform: scale(0);
opacity:0;
}
}
#keyframes ripple {
0% {transform: scaleX(0);}
50%{transform: scaleX(1);opacity:0.3;}
100%{transform: scaleX(1);opacity:0;background-size: 1000% 1000%;}
}
`