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
Post a Comment