Question

我是角度材质的新手，我想自定义标签，我过度使用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函数来确定是否应该启用该按钮。此功能如下所示：

return criteria
        .SetResultTransformer(Transformers.AliasToBean<ProdutoDto>())
        .List<ProdutoDto>().ToList();

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

Answer 2

我使用下一个scss修复

md-tabs-canvas { md-pagination-wrapper, md-tabs-dummy-wrapper { white-space: nowrap; md-tab-item, md-dummy-tab { float: none; display: inline-block; } } }

md-next-button不使用角度材料

2 个答案: