javascript - Disable 'outside click' on 'FAB Speed Dialog' from Angular Material -


according pen: http://codepen.io/kuhnroyal/pen/zrepxk when click outside element (outside click) closes fab dial.

  <md-fab-speed-dial md-trigger="click" md-direction="down" class="md-scale md-fab-top-right">     <md-fab-trigger>       <md-button aria-label="menu" class="md-fab md-warn">         <i class="fa fa-plus"></i>       </md-button>     </md-fab-trigger>     <md-fab-actions>       <md-button aria-label="create data app" class="md-fab md-raised md-mini" ng-click="action($event)">         <md-tooltip>create data app</md-tooltip>       </md-button>     </md-fab-actions>   </md-fab-speed-dial> 

this pen developed still showing when click on children, wanna same behavior when click outside.

ps: workaround i've got comment line: 10072 in angular-material.js consist in close fab when click outside:

function checkforoutsideclick(event) {   if (event.target) {     var closesttrigger = $mdutil.getclosest(event.target, 'md-fab-trigger');     var closestactions = $mdutil.getclosest(event.target, 'md-fab-actions');      if (!closesttrigger && !closestactions) {       // vm.close();     }   } } 

the fab speed dial not offer way customize interaction, you'll need modify code bit make work want. solution seems valid.

the team has discussed adding md-is-locked-open attribute (https://github.com/angular/material/issues/4973) users can better control behavior, has not been implemented yet , not priority.


Comments

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

javascript - Get parameter of GET request -

javascript - Twitter Bootstrap - how to add some more margin between tooltip popup and element -