为fab按钮添加背景颜色，以便对比度更好

Question

我正在使用angular自己的材质实现，并使用fab按钮和工具提示功能。它效果很好，但我希望像Android上的谷歌日历应用

那么如何修改代码以添加白色背景，并且即使没有鼠标就可以显示工具提示？我是否必须为fab按钮编写新指令，还是可以为此更改添加另一个指令？

Answer 1

查看https://material.angularjs.org/HEAD/demo/fabSpeedDial

上提供的更多选项演示

它使用md-autohide="false"和md-visible="tooltipVisible"属性来设置工具提示是否应该可见。然后，在控制器中，它监视FAB isOpen变量的变化，在短暂的延迟（600ms）之后，它将tooltipVisible设置为true：

  // On opening, add a delayed property which shows tooltips after the speed dial has opened
  // so that they have the proper position; if closing, immediately hide the tooltips
  $scope.$watch('demo.isOpen', function(isOpen) {
    if (isOpen) {
      $timeout(function() {
        $scope.tooltipVisible = self.isOpen;
      }, 600);
    } else {
      $scope.tooltipVisible = self.isOpen;
    }
  });

至于工具提示的颜色，您应该能够在工具提示中添加自定义CSS类，然后使用该类更改背景颜色。类似的东西：

md-tooltip.white-tooltip .md-content {
  background-color: white;
  color: black;
}