html - md-next-button 不适用于 Angular Material

Question

我是 Angular Material 的新手，我想自定义我在 md-tabs 中过度使用 css 的选项卡，如下所示:

.md-tabs.md-default-theme .md-tab, md-tabs .md-tab {
  background-color : white !important;
  margin-right:1em;
} 

我的代码 html 是:

<md-content> 
  <md-tabs md-dynamic-height="" md-border-bottom="" style='border-radius: 3px 3px 0 0; !important'>
    <md-tab ng-repeat="itemTab in vm.tabs" label="{{itemTab.label}}" ng-if="vm.showedTabs.indexOf(itemTab.id) > -1">
      <div ng-include="'main.html'"></div><!--ici on insert nos pages de workflow-->
    </md-tab>
  </md-tabs>
</md-content>
<md-button class="md-raised md-primary" ng-click="vm.addNewTabs()">Add new tabs</md-button>

名为 vm.addNewTabs() 的函数用于动态添加新选项卡，它工作正常。当我覆盖 css 类时出现问题，md-next-button 不起作用，它出现但不起作用，如果我删除 margin-right:1em;一切正常。

有人知道为什么会出现这种情况吗？

Answer 1

md-next-button 调用 Angular Material 内部的 canPageForward 函数来确定是否应该启用该按钮。这个函数看起来像这样:

function canPageForward () {
    var lastTab = elements.tabs[ elements.tabs.length - 1 ];
    return lastTab && lastTab.offsetLeft + lastTab.offsetWidth > elements.canvas.clientWidth +
        ctrl.offsetLeft;
  }

显然，在计算尺寸时未考虑您的自定义 CSS，并且此函数返回 false，因此禁用了按钮。