Question

我有md-icon指令的几个问题（来自angular-material）。以下是显示我的问题的代码：http://codepen.io/anon/pen/bpWNWr

以下是HTML的重要部分：

<div ng-controller="MyController">
  <div layout="row">
    <span class="noselect" ng-repeat="rates in rating track by $index" >
      <md-icon class="stars noselect" >
        {{rates.icon}}
      </md-icon>
    </span>
    {{rate}}
  </div>
</div>

css

.stars {
    font-size: 36px !important;
    margin-right: 12px;
}

.noselect {
  outline: none;
}

和js：

var myApp = angular.module('MyApp', ['ngMaterial']);

myApp.controller('MyController', function($scope) {
  $scope.rating = [];

  $scope.rating.push({icon: "star"});
  $scope.rating.push({icon: "star"});
  $scope.rating.push({icon: "star_half"});
  $scope.rating.push({icon: "star_border"});
  $scope.rating.push({icon: "star_border"});

  $scope.rate = 2.5;
});

所以在这段代码中，有些问题：

为什么我要用!important设置图标的大小并在之后手动设置边距？是否有根据图标大小自动设置边距的解决方案？
如何将文字与图标对齐？

提前致谢

Answer 1

我需要澄清一些事情。对于第一个问题，您不需要使用!important，如果您想要指定边距，那么只能使用指定边距，否则在容器上使用layout-margin属性或使用填充{{1 }}。现在offical documentation表示我们可以使用layout-padding font-icon 24px 32px 40px 48px使用md-24 md-32 } md-40和md-48在此类material-icons的帮助下调用。但实际上我无法使用它，因此您必须在css文件中手动指定。我在GitHub上找到了issue。在下面的链接中，我用示例定义了这些类。

现在要对齐您可以使用layout-align="start center的元素，它会将所有元素对齐在垂直方向的中心。为offical doc寻找其他很酷的选择。所以，请查看以下链接，如果有任何遗漏，请告诉我。

http://codepen.io/next1/pen/GZmJRM

要记住的一件事，因为你使用material-design所有的语法都应该是8的倍数。所以如果可能的话，尽量不要使用36px类的值。

角度材质和md-icon指令

1 个答案: