如何修改Angular Material的md-fab-speed-dial间距？

Question

根据角度材料上的演示重新实现工厂快速拨号后，我设法设置了位置，但我似乎无法弄清楚如何设置表盘之间的间距。

他们真的很亲近。我已经尝试设置边距和填充，但是在按钮中，但它似乎不正确，因为它甚至在关闭模式下也适用，而仅用于在打开模式下设置。

Link to codepen demo of my code

HTML

   <div ng-controller="DemoCtrl as demo" layout="column" ng-cloak="" class="fabSpeedDialdemoBasicUsage" ng-app="MyApp">

<div  style="position: fixed; bottom: 15px; right: 50%" >


      <md-fab-speed-dial md-open="demo.isOpen" md-direction="up"
                         class="md-fling"  ng-cloak> 
        <md-fab-trigger >
          <md-button aria-label="menu" class="md-fab md-warn" ng-style="navIconStyle" >
            <md-icon md-svg-src="img/icons/menu.svg"></md-icon>
          </md-button>
        </md-fab-trigger>

        <md-fab-actions>
          <md-button ng-repeat="button in demo.pageButtons"  class="md-fab md-raised md-icon-button "
                    aria-label="{{button.label}}" style="background-color:orange;margin-top:10px;"> 
                    <md-icon md-svg-icon="{{button.icon}}"></md-icon>
          </md-button>
        </md-fab-actions>
      </md-fab-speed-dial>

    </div>
</div>

JS

(function() {
  'use strict';

  angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
    .controller('DemoCtrl', function() {


        this.pageButtons = 
    [
        {
            icon:  "img/icons/menu.svg",
            label: "News"
        },
        {
            icon:  "img/icons/menu.svg",
            label: "Schedule"
        },
        {
            icon: "img/icons/menu.svg", 
            label: "Home"
        }
    ]


    });
})();

Answer 1

您可以创建与样式数组相对应的ng样式

由于我们专注于快速拨号，因此打开状态和关闭状态取决于指令的参数md-open，这是由isOpen指定的。 因此，当isOpen = true时，我们可以设置10px填充，否则如果关闭，则将padding设置为false，并使其为0px。我们可以通过创建这两种css样式的数组来实现。然后使用整数转换isOpen状态的布尔值，因此样式数组相应地对应。

在Html的md-button标签

中

ng-style="navIconStyle[navController.isOpen ? 1 : 0]"

在Js控制器中

$scope.navIconStyle =
[
    {
        "margin-bottom" : "0px"
    },
    {
        "margin-bottom" : "10px"
    }
] 

Answer 2

我尝试添加ng-style，但似乎Angular Material框架在扩展时会覆盖样式。我最后添加了一个单独的类并使用了ng-class属性。

ng-class="{'spaced': demo.isOpen }"

定义类如下。根据FAB开放的位置使用适当的保证金边。我的情况，菜单配置为在左边打开，所以我在右边设置边距。

.md-button.md-fab.md-mini.spaced {
    margin-right: 8px !important;
}