I have a mat-menu dropdown, having a mat-button in it.
I want to remove the overlay that appears once user clicks the dropdown.
I am able to remove the hover overlay by writing the following css.
.no-hover-effect ::ng-deep .mat-button-focus-overlay {
background-color: transparent;
}
This is how html code for mat-button looks like.
<div class="mat-menu-wrapper mat-menu-size" [matMenuTriggerFor]="abc">
<button mat-button class="mat-button no-hover-effect">
<span class="mat-button-wrapper"><span class="mat-menu-text">
xyz</span>
</span>
</button>
<mat-menu #abc="matMenu">
<button mat-menu-item>
xyz
</button>
<button mat-menu-item>
xyz
</button>
</mat-menu>
<mat-icon class="mat-icon-ui">arrow_drop_down
</mat-icon>
</div>
You need to disable the ripple effect of mat-button. As mentioned here you can disable it by adding [disableRipple]="true" to your mat-button.
Learn more about ripple effect
Related
I have the following problem: i have a <div> and inside of that tag i have a button, but i cant center the button vertically and horizontally inside the <div> also i want the button to be center for phones for that i saw it toggle device toolbar
Really dont know how to solve it, im new using Angular
Below i will let the code of my <div> that has the button inside, the picture of how the button is displayed also i'm using Angular material
Div tag code
<div *ngIf="nav_bar==false" class="colour large">
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item [routerLink]="'/'">
<mat-icon>dialpad</mat-icon>
<span>Inicio</span>
</button>
<button mat-menu-item [routerLink]="['/nosotros']">
<mat-icon>voicemail</mat-icon>
<span>Nosotros</span>
</button>
<button mat-menu-item [routerLink]="['/contacto']">
<mat-icon>notifications_off</mat-icon>
<span>Contacto</span>
</button>
</mat-menu>
<button class="mat-button col-xs-3" (click)="nav_bar=!nav_bar">
<img src="./assets/icons/baseline_visibility_white_18dp.png" class="mdc-icon-button__icon"/>
</button>
</div>
It's not an angular thing, it's an html/css thing. If you're going to use bootstrap you might want to check out the grid documentation a bit to better familiarize yourself with how it works, along with the utility classes. Something like this would probably be more what you're looking for.
<div *ngIf="nav_bar==false" class="colour large d-flex align-items-center">
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item [routerLink]="'/'">
<mat-icon>dialpad</mat-icon>
<span>Inicio</span>
</button>
<button mat-menu-item [routerLink]="['/nosotros']">
<mat-icon>voicemail</mat-icon>
<span>Nosotros</span>
</button>
<button mat-menu-item [routerLink]="['/contacto']">
<mat-icon>notifications_off</mat-icon>
<span>Contacto</span>
</button>
</mat-menu>
<button class="mat-button mx-auto" (click)="nav_bar=!nav_bar">
<img src="./assets/icons/baseline_visibility_white_18dp.png" class="mdc-icon-button__icon"/>
</button>
</div>
I am using an Angular material menu to create the user menu. As the first information I want to display the user's first name and last name.
Here I am interested in the behavior of a disabled mat-menu-item because of the non-clickable nature of it but I cannot override the behavior via CSS. I want it to be bold as in the gitlab user menu and not the light gray as it is.
<div>
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>account_circle</mat-icon>
<mat-icon>arrow_drop_down</mat-icon>
</button>
<mat-menu #menu="matMenu" yPosition="below" >
<p class="user-info" mat-menu-item disabled>Name Surname</p>
<mat-divider></mat-divider>
<button class="menu-item" mat-menu-item>Profile</button>
<mat-divider></mat-divider>
<button mat-menu-item>Sign out</button>
</mat-menu>
</div>
In your css you can say:
.mat-menu-item[disabled] {
color: default;
}
How can I have the more_vert button align on the right side in the header?
I'm using Angular 7 and Material UI.
<mat-toolbar color="primary" class="mat-elevation-z10">
<span>
<mat-icon>favorite</mat-icon>
Derek Zoolander's Center for Models Who Can't Find Love
</span>
<button mat-icon-button [mat-menu-trigger-for]="menu">
<mat-icon>more_vert</mat-icon>
</button>
The key was to have <span class="example-spacer"></span> between your title <span> and the "more_vert" mat-icon.
complete HTML:
<mat-toolbar color="primary" class="mat-elevation-z10">
<mat-toolbar-row>
<mat-icon>favorite</mat-icon>
<span>
Derek Zoolander's Center for...
</span>
<span class="example-spacer"></span>
<button mat-icon-button [mat-menu-trigger-for]="menu">
<mat-icon class="example-icon" aria-hidden="false" aria-label="expand menu">more_vert</mat-icon>
</button>
</mat-toolbar-row>
</mat-toolbar>
you can check working example here...
I am trying to change CSS property by element ID using vanilla JS?
I am trying to achieve the following effect:
After the first button is clicked on the bottom bottom, the first button on the top should change it's class from btn-dark to btn-warning.
The remaining buttons should follow this same pattern: #b2 clicked should result in #d2 being changed from btn-dark to btn-warning.
My current attempt:
<div class="row">
<button *ngFor="let number of [1,2,3,4,5,6,7,8,9,10]"
type="button"
class="btn btn-dark"
id="d{{number}}"
>
</button>
</div>
<div class="row">
<button (click)="onClick($event)"
*ngFor="let number of [1,2,3,4,5,6,7,8,9,10]"
type="button"
class="btn btn-secondary"
id="b{{number}}">{{number}}
</button>
</div>
Screenshot displaying the template
Use ngClass, e.g.:
<button [ngClass]="{'btn-dark': true}">...</button>
Try like this
it will changed one of them at a time
stackblitz demo link
in MDL there are two options: Normal Button:
<button className="mdl-button mdl-js-button">
Continue with Facebook
</button>
And Icon Button:
<button className="mdl-button mdl-js-button mdl-button--icon">
<i className="material-icons">mood</i>
</button>
How is it possible to have a button with icon to the very left, i.e. something like
<button className="mdl-button mdl-js-button mdl-button--raised mdl-button--icon-left">
<i className="material-icons">mood</i> Continue with Facebook
</button>
How about this:
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">
<i class="material-icons">add_shopping_cart</i>Add to shopping cart
</button>
Codepen
Solved it by adding background image:
background-image: 'url("/assets/images/facebook-icon.png")';
background-repeat: 'no-repeat';
background-size: 'contain',