I am trying to create a drop-down using md-menu-bar and md-menu
you can see in snapshots
using the code
<md-menu-bar>
<md-menu>
<md-button aria-label="Open phone interactions menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
<img ng-src="https://media.licdn.com/mpr/mpr/p/5/005/098/12f/223c996.jpg" class="uilr-avatar">
</md-button>
<md-menu-content width="4">
<md-menu-item>
<md-button ng-click="ctrl.redial($event)">
<md-icon md-svg-icon="call:dialpad" md-menu-align-target></md-icon>
Redial
</md-button>
</md-menu-item>
<md-menu-item>
<md-button disabled="disabled" ng-click="ctrl.checkVoicemail()">
<md-icon md-svg-icon="call:voicemail"></md-icon>
Check voicemail
</md-button>
</md-menu-item>
<md-menu-divider></md-menu-divider>
<md-menu-item>
<md-button ng-click="ctrl.toggleNotifications()">
<md-icon md-svg-icon="social:notifications-{{ctrl.notificationsEnabled ? 'off' : 'on'}}"></md-icon>
{{ctrl.notificationsEnabled ? 'Disable' : 'Enable' }} notifications
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-menu-bar>
but I want this drop down with a triangle at top
please check the snapshots taking from inbox.google.com
please tell how can I achieve this.
Thanks in advance
please check following fiddle
is that what you want?
[https://jsfiddle.net/suunyz3e/252/]
Related
I have used the separate close button to close the popover but not able to navigate to the close button using keyboard.
"#ng-bootstrap/ng-bootstrap": "^4.1.0",
code:
<div>
<ng-template #popContent>
<span id="glossary"> {{element.description| glossary:glossaryDescription}}</span>
<button class="close" (click)="p.close()" tabindex="0"><img src="assets/icons/close.svg"></button>
</ng-template>
<button class="popoverLink" [ngbPopover]="popContent" [autoClose]="false"
triggers="manual" #p="ngbPopover" (click)="p.open()" placement="top-right bottom-right"
container="body"
html="true" popoverClass="custom-popover">
{{split(element.description)[0]}}
</button>
/{{split(element.description)[1]}}
</div>
I'm looking for a way to check if my mat-menu is open so I can add a class to the button that opened it using [ngClass] based on the state of the menu.
<button mat-stroked-button mdbWavesEffect [matMenuTriggerFor]="menu">Actions</button>
<mat-menu #menu="matMenu" [overlapTrigger]="false" panelClass="custom">
<a routerLink="/attendence/detail" mat-menu-item>View Attendance</a>
<a routerLink="/adherence/detail" mat-menu-item>View Adherece</a>
<button mat-menu-item>Edit Agent</button>
<button mat-menu-item>Upload photo</button>
<button mat-menu-item>Deactivate Agent</button>
</mat-menu>
You can use Material matMenuTrigger directive to check whether the menu is open or not
<button mat-button [matMenuTriggerFor]="menu" #t="matMenuTrigger">Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
{{t.menuOpen}}
Check the example here: https://stackblitz.com/edit/angular-9hbzdw
Now you use ngClass binding to change the style of your button!
You can bind your method on "menuOpened", that method will be invoked whenever Menu is opened
<mat-menu #menu="matMenu" [overlapTrigger]="false" (menuOpened)="isOpened($event)" panelClass="custom">
<a routerLink="/attendence/detail" mat-menu-item>View Attendance</a>
<a routerLink="/adherence/detail" mat-menu-item>View Adherece</a>
<button mat-menu-item>Edit Agent</button>
<button mat-menu-item>Upload photo</button>
<button mat-menu-item>Deactivate Agent</button>
</mat-menu>
And add this method in your component,
isOpened(evt:any){
// set you flag here that you can use in ng-class for the button.
}
Hope this helps.
I faced the same suituation. And I made a CSS work around.
While we click on the menu a custom aria tag is appended to the menu and get removed while we close the dropdoen. With this we can use CSS custom selector (It works with most mordern browsers)
.parentclass a[aria-expanded] { whatever you need }
Some case (if button)
.parentclass button[aria-expanded] { whatever you need }
Thanks,
<button mat-stroked-button mdbWavesEffect [matMenuTriggerFor]="menu">Actions</button>
<mat-menu #menu="matMenu" [overlapTrigger]="false" panelClass="custom">
<a routerLink="/attendence/detail" mat-menu-item>View Attendance</a>
<a routerLink="/adherence/detail" mat-menu-item>View Adherece</a>
<button [ngClass]="selectedMenuItem ===1 ? 'active' : ''" (click)="onSelectMenuItem(1)" mat-menu-item>Edit Agent</button>
<button [ngClass]="selectedMenuItem ===2 ? 'active' : ''" (click)="onSelectMenuItem(2)" mat-menu-item>Upload photo</button>
<button [ngClass]="selectedMenuItem ===3 ? 'active' : ''" (click)="onSelectMenuItem(3)" mat-menu-item>Deactivate Agent</button>
</mat-menu>
selectedMenuItem = 1 // Initial value set to 1
onSelectMenuItem(id): void {
this.selectedMenuItem = id;
}
Sometimes you might face an issue with the mat-menu when your angular application uses the onPush changeDetection. So in that case you need to let Angular know that menu is open or closed.
Angular Material provides the event to detect if the menu is open or not.
menuOpened: Event emitted when the associated menu is opened.
menuClosed: Event emitted when the associated menu is closed.
Here is the code:
<button mat-button #menuOption="matMenuTrigger" [matMenuTriggerFor]="menu"
(menuOpened)="menuOption.menuOpen" (menuClosed)="menuOption.menuOpen">
Menu
<span>{{menuOption.menuOpen ? 'open': 'closed'}}</span>
</button>
I'm having an issue with md-options being hidden behind an md-menu - I'm using the md-select in a 'sub menu' (see image below):
It was asked about here and the answer was given that md-select was not supported inside of an md-menu yet, but I wonder if anyone has found a workaround? In my case, I have a dropdown of different checkboxes/selection options in each sub menu so using something like md-chips would really be a pivot from what I'm trying to accomplish.
HTML
<md-menu>
<md-button ng-click="$mdOpenMenu()">open menu</md-button>
<md-menu-content>
<md-menu-item>
<md-menu>
<md-button ng-click="$mdOpenMenu()">First ></md-button>
<md-menu-content>
<md-menu-item>
option 1
</md-menu-item>
<md-menu-item>
option 2
</md-menu-item>
<md-menu-item>
option 3
</md-menu-item>
</md-menu-content>
</md-menu>
</md-menu-item>
<md-menu-item>
<md-menu>
<md-button ng-click="$mdOpenMenu()">Second ></md-button>
<md-menu-content>
<md-input-container>
<md-select placeholder="Select an option..." ng-model="optionChosen">
<md-option ng-repeat="option in options" ng-value="option">
{{option}}
</md-option>
</md-select>
</md-input-container>
</md-menu-content>
</md-menu>
</md-menu-item>
</md-menu-content>
</md-menu>
JavaScript
app.controller('MainCtrl', function($scope) {
$scope.options = [
'option one',
'option two',
'options three'
];
$scope.optionChosen = null;
});
Working Code: Plunkr
I'm trying to get the element and set some styles to it, but it's my first time and I can't achieve it. I also can't set id or class to the element, because it's dynamically generated. I'm searching for the easiest solution and believe, that you guys will help me with this simple question.
Here is my HTML:
<md-list class="no-paddings" flex="100">
<md-list-item flex="100" ng-repeat="adGroup in adsGroupsAndKeywords track by $index">
<md-menu>
<div layout="row" layout-align="space-between center">
<div ng-click="AdsGroupsCtrl.openMenu($mdOpenMenu, $event)">
<h6>
{{ adGroup.name }}
</h6>
<md-chips
ng-click="call($event)"
md-on-remove="AdsGroupsCtrl.removeKeywordFromGroupOfAds($chip);"
ng-model="adGroup.keywords"
readonly="true"
md-removable="true">
<md-chip-template>
<em>{{$chip.keyword}}</em>
</md-chip-template>
</md-chips>
<md-divider></md-divider>
</div>
</div>
<md-menu-content width="4">
<md-menu-item>
<md-button ng-click="AdsGroupsCtrl.addToCurrentGroup($index)">
Добавить в данную группу
</md-button>
</md-menu-item>
<md-menu-item>
<md-button
ui-sref="app.expansionOfSemantics.adsList(
{
campaignsId: capmpaignId,
adId: adsGroupsAndKeywords[$index].id,
regionIds: adsGroupsAndKeywords[$index].regionIds,
keywords: keywords
})">
Сознать новую группу на основе текущей
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-list-item>
</md-list>
Thanks in advance
From your code I am not certain which your pseudo-element is. But in general you select pseudo-elements with ::before and ::after.
The pseudo-elements are created by the content-property, the ::before and ::after pseudo-selectors as the name implies just select the location.
::before{...} or ::after{...}
(select all pseudo elements on the website that are located as first or last child inside their parent element respectively)
.className::before{...}
(selects the pseudo-element that is located as first child inside the element with the class="className")
.className::before{content: '';}
(::before selects the first spot inside the element with the class="className" but its the content-property that creates the pseuod-element)
Ionic Swipe Left does not work with item-icon-right
Plunker showing the behavior
I'm running into some confusing behavior. With an ion-list and ion-items, I'm setting attributes to enable swiping.
<ion-list can-swipe="true">
<ion-item ng-repeat="element in ctrl.data" class="item-remove-animate item-icon-right">
<span>{{ element }}</span>
<span class="item-note">Date</span>
<i class="icon ion-chatbubble-working"></i>
<ion-option-button class="button-assertive icon ion-trash-a" ng-click="ctrl.delete($index) ">
</ion-option-button>
</ion-item>
</ion-list>
However, there's two issues that I'm running into
The remove animation does not ever seem to work
If set "item-icon-right" on the ion-list, then the swipe messes up completely. If I add an "i" tag with the class, swipe works.
Does anyone know why this is happening? I'm new to CSS and ion, so it's a bit difficult for me to know what to look for while debugging.
If you could tell me your thought process or point to related articles for debugging these unexpected behaviors, I'd really appreciate it
For deletion animation, it seems that collection-repeat does not add "ng-leave" class due to a performance hit. (ref)
For the swipe left bug, I had to remove "icon" from the ion-option class.
Here a Sample hope this help you
<ion-list class"animate-ripple" show-delete="false" can-swipe="true" swipe-direction="both">
<ion-item ng-show="orders_list.length==0">
<h2>No orders, Please go to Menu and Select Create a Order</h2>
</ion-item>
<ion-item item="order"
ng-repeat="order in orders_list | custom:filterOrder"
class="item-text-wrap" >
<a class="item item-icon-right" style=" border:none; text-align:left"
ng-click="showOrdersDetail(order.order_id)">
<i class="icon ion-chevron-right"></i>
<h2>Order No. {{order.order_id}}</h2>
<h5>TOTAL:{{order.total_pagar}}</h5>
<h5>ITEMS:{{order.total_items}}</h5>
</a>
<div ng-if="filterOrder.tipo_estado === 'ACT'">
<ion-option-button class="button-assertive" ng-click="del_order(order,{{$index}});">
Del
</ion-option-button>
<ion-option-button class="button-balanced" ng-click="pay_order(order);">
Pay
</ion-option-button>
</div>
<div ng-if="filterOrder.tipo_estado === 'PAG'">
<ion-option-button class="button-balanced" ng-click="showLinceseList(order.order_id);">
Apply a<br> License
</ion-option-button>
</div>
</ion-item>
</ion-list>