【问题标题】:How to change md fab speed dial to show on click? Angular material如何更改 md fab 快速拨号以在点击时显示?角材料
【发布时间】:2015-08-05 10:18:31
【问题描述】:

如何更改 md-fab-speed-dial 以通过单击而不是悬停来打开和激活快速拨号菜单。 我怎样才能删除那个空白(在图片上)?

这里是视图

md-fab-speed-dial md-open="demo.isOpen" md-direction="{{ demo.selectedDirection }}"  ng-class="demo.selectedMode"
    md-fab-trigger.actions-icon-menu
      md-button.md-icon-button aria-label="menu"
        md-icon.more-icon md-svg-src="#{asset_path('icons/more_icon.svg')}"
    md-fab-actions.actions-menu
      section.actions_icons layout="row" layout-align="center center"
        md-button.md-primary aria-label="edit icon"
          md-icon md-svg-src="#{asset_path('actions_icons/edit.svg')}"
        md-button.md-primary aria-label="remove icon"
          md-icon md-svg-src="#{asset_path('actions_icons/remove.svg')}"
        md-button.md-primary aria-label="download icon"
          md-icon md-svg-src="#{asset_path('actions_icons/download.svg')}"
        md-button.md-primary aria-label="print icon"
          md-icon md-svg-src="#{asset_path('actions_icons/print.svg')}"
        md-button.md-primary aria-label="mail icon"
          md-icon md-svg-src="#{asset_path('actions_icons/mail.svg')}"

控制器:

function ($scope, $mdSidenav, $mdUtil, $location, Invoice) {

      $scope.demo = {
        topDirections: ['left', 'up'],
        bottomDirections: ['down', 'right'],

        isOpen: false,

        availableModes: ['md-fling', 'md-scale'],
        selectedMode: 'md-fling',

        availableDirections: ['up', 'down', 'left', 'right'],
        selectedDirection: 'left'
      };
    }]);

【问题讨论】:

    标签: ruby-on-rails angularjs angular-material


    【解决方案1】:

    md fab dial 是否打开取决于“demo.isOpen”模型。 您可以决定使用ng-mouseenterng-click

    【讨论】:

      【解决方案2】:

      只需将md-trigger 设置为click

      例如:

      <md-fab-speed-dial md-trigger="click" md-direction="down" class="md-scale md-fab-top-right"></<md-fab-speed-dial>
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2017-11-04
        • 2015-06-26
        • 1970-01-01
        • 1970-01-01
        • 2017-11-24
        • 2016-05-04
        • 2020-06-17
        相关资源
        最近更新 更多