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',
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;
}
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
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...
How do I center a button between two other buttons in a toolbar?
Here's my code and resulting screenshot
<div id="toptoolbar">
<button class="toolbar-button">
<i class="fa fa-comments" style="font-size:17px"></i>
</button>
<button class="toolbar-button">
My title
<!-- text-purple center-block doesn't work -->
</button>
<button class="toolbar-button pull-right">
<i class="fa fa-ellipsis-v" style="font-size:17px"></i>
</button>
</div>
I'm using OnsenUI (and will be using VUE with it) so is there a class I can simply add from bootstrap or any other framework included with OnsenUI?
Or can I use some custom CSS to do this?
Similar to this question but with OnsenUI and Monaca (so good for both ios and android)
<div id="toptoolbar">
<button class="toolbar-button">
<i class="fa fa-comments" style="font-size:17px"></i>
</button>
<span class="stretcher"></span>
<button class="toolbar-button">
My title
<!-- text-purple center-block doesn't work -->
</button>
<span class="stretcher"></span>
<button class="toolbar-button pull-right">
<i class="fa fa-ellipsis-v" style="font-size:17px"></i>
</button>
</div>
CSS:
#toptoolbar {
display: flex;
align-items: center;
justify-content: center;
}
.stretcher {
flex: 1;
}
// HTML
<div id="toptoolbar">
<button class="toolbar-button">
<i class="fa fa-comments" style="font-size:17px"></i>
</button>
<button class="toolbar-button title">
My title
<!-- text-purple center-block doesn't work -->
</button>
<button class="toolbar-button pull-right">
<i class="fa fa-ellipsis-v" style="font-size:17px"></i>
</button>
</div>
//CSS
.toolbar-button.title{
position: absolute;
left: 49%;
}
This is just a plain css solution.
updated Fiddle http://jsfiddle.net/JfGVE/2459/