I want to search the Angular component name for this widget which is three dots, and when we click it then something like a context-menu appears:
How is it called?
Search here for that icon https://material.io/resources/icons/?search=dot&style=baseline.
And here you have some examples of creating this type of menu https://material.angular.io/components/menu/examples
I guess this is what you're looking for, here is my code that works
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon button with a horizontal three dot icon">
<mat-icon>more_horiz</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Edit</button>
<button mat-menu-item>View</button>
<button mat-menu-item>Delete</button>
</mat-menu>
To change the three dot to be vertical, simple change this
more_horiz
to
more_vert
Related
I have a mat-icon button,however after adding [routerlink]="[/edit-job]" I am not able to view the button icon. Although I can see mat-tooltip and on clicking it redirects me to edit page but I am unable to viewe Icon.
Current Code for Mat-Button
<button
mat-icon-button
[routerLink]="['/edit-job']"
matTooltip="Edit Job"
></button>
However If I change my code to this I am able to view Icon properly
<button mat-icon-button (click)="editJob()" matTooltip="Edit Job">
<mat-icon>edit</mat-icon>
</button>
Can someone tell what am I doing wrong and how to fix it.
I am attaching a screenshot for better understanding.
As shown on the documentation you should add the import on app-module
https://material.angular.io/components/button/api
The import to add is :
import {MatButtonModule} from '#angular/material/button';
And thats an example of material button :
<button mat-icon-button>Click me!</button>
You have to include <mat-icon>edit</mat-icon> inside the <button> tag for the first case too.
as #Sumit Vekariya said add <mat-icon>edit</mat-icon> to your button
Ex:
<button mat-icon-button [routerLink]="['/edit-job']" matTooltip="Edit Job">
<mat-icon>edit</mat-icon>
</button>
i have been trying to add icon from http://seehowsupport.com/font-awesome/ website to my p-button.
<div class="ui-g-12">
<button pButton id="selectFile" (click)="selectFile()" label="+ Select File..."></button>
</div>
here, in place of '+' in label, i wish to set icon from above url. I have heard changing some content attribute in css to \f067 can do it but m not sure how to.
Thanks
Icon on a button is specified with icon attribute and position is customized using iconPos attribute. Default icon position is left. To display only an icon, leave label as undefined.
Here are two ways by which you can add icons to primeng Button.
<button pButton type="button" icon="pi pi-check" iconPos="left"></button>
<p-button label="Click" icon="fa fa-check" iconPos="left"></p-button>
working Example
For more read on documentation -
https://primefaces.org/primeng/#/button
Use This way where it shows in their documentation and it works.
<div class="ui-g-12">
<button pButton id="selectFile" (click)="selectFile()" label="Select File..."><i class="fas fa-500px"></i>Text</button>
</div>
Link for How to use it https://fontawesome.com/how-to-use/svg-with-js
I need help in css to obtain a Button
<button mat-icon-button>
<mat-icon>format_align_left</mat-icon>
</button>
Equivalent (in design) to a Button toggle
<mat-button-toggle-group>
<mat-button-toggle>
<mat-icon>format_align_left</mat-icon>
</mat-button-toggle>
</mat-button-toggle-group>
Because in a real toolbar (see button toggle for example), some of the command (eg : indent) are not toggled but just clicked.
But i don't find the exact css to apply on my button...
Thank you for your help !
You can use any of the built-in angular styles directly, such as mat-button-toggle-checked which applies the toggle button's filled background color.
A toggle button that is not "on" or pressed is basically a raised button without a minimum width. So, to make a regular button look like a toggle button:
<button mat-button mat-raised-button style="min-width: unset;">
<mat-icon>format_align_left</mat-icon>
</button>
A toggle button that is "on" or pressed is basically a raised button without a minimum width filled with the "on" color from the toggle button. So, to make a regular button look like a toggle button that is "on":
<button mat-button mat-raised-button style="min-width: unset;"
class="mat-button-toggle-checked">
<mat-icon>format_align_left</mat-icon>
</button>
You can combine the two in one button to produce your own "standalone" toggle button using ngClass and some simple logic:
<button mat-button mat-raised-button style="min-width: unset;"
[ngClass]="{'mat-button-toggle-checked' : on}"
(click)="on = !on;">
<mat-icon>format_align_left</mat-icon>
</button>
But of course you don't need to do that because you can use a single mat-button-toggle inside a mat-button-toggle-group with the multiple option to have a standalone toggle button:
<mat-button-toggle-group multiple>
<mat-button-toggle value="left">
<mat-icon>format_align_left</mat-icon>
</mat-button-toggle>
</mat-button-toggle-group>
Have a task where I have some information in a button that needs to all be aligned to the same sides.
Its a digitized phone menu so the info on the left size is the line name and the information on the right is the lines extension. I want to align all of the extensions right.
I used buttons that activate Modals with more information. The buttons are required for the form of modal I am using. (Or at least that is what I found in research.)
Tried paragraph tricks but they broke the buttons function.
<button type="button" class="btn" data-toggle="modal" data-target=".HPENET_MODAL">2 - HPE Networking ................................................... XXXXX</button>
Try this:
<button type="button" class="btn" data-toggle="modal" data-target=".HPENET_MODAL" style="width:500px;text-align:left">2 - HPE Networking <div style="float:right">XXXX</div></button>
I am converting my bootstrap 2 site to bootstrap 3 and am a bit stuck on a particular control which is several sets of tab pages controlled by toggle buttons.
Here is an example of my working bs2 code:
http://bootply.com/97187
If I run this code in bs3, I get this:
http://bootply.com/97189
The problem as you will see is that the buttons no longer behave like a group of radio buttons. They toggle individually.
I am currently here:
http://bootply.com/97184
This looks like it works but it doesn't. The grey colour you get when you click on a button is in fact, the "I've now got the focus" colour. Click somewhere else and it goes back to white.
I really need the buttons to toggle as they did in bs2. What small thing am I neglecting here?
Your problem is in here:
<div class="well well-sm">
<span>Set A:</span>
<div class="btn-group">
<button class="btn btn-sm btn-default active" href="#tab1" data-toggle="tab">1</button>
<button class="btn btn-sm btn-default" href="#tab2" data-toggle="tab">2</button>
</div>
<span> Set B:</span>
<div class="btn-group">
<button class="btn btn-sm btn-default" href="#tabA" data-toggle="tab">A</button>
<button class="btn btn-sm btn-default" href="#tabB" data-toggle="tab">B</button>
<button class="btn btn-sm btn-default" href="#tabC" data-toggle="tab">C</button>
</div>
</div>
Adding the class active to the button class for tab1 seemed to prevent the buttons from toggling as you want them to. Simply removing the active class seems to fix the problem.
Demo: http://bootply.com/97199
Ok, I've been playing around quite a bit and got to an acceptable solution.
Unlike the Bootstrap 2 version, it requires a bit of JavaScript.
Here it is: http://bootply.com/97426
The only thing it doesn't do is group the button groups into a single component but this is acceptable, unless someone can find a way to do this as well.
Would be nicer if Bootstrap just worked the same way as V2 in this case.