angularjs - 角材料选项卡中的标题未正确显示

Question

我正在使用角度材质选项卡，但我的实现有问题，它给了我这个结果（在 Chrome 和 Firefox 上）：

如您所见，选项卡标题被截断。这是我的实现： HTML：

<md-tabs>
    <md-tab ng-repeat="tab in tabs">
        <md-tab-label>{{tab.titre}}</md-tab-label>
        <div class="md-tabs-content">
            content tab
        </div>
    </md-tab>
</md-tabs>

JS：

var tabs = [];
for(i=0;i<3; i++){
    tabs.push({

        titre: 'title'
    });
}
$scope.tabs = tabs;
$scope.selectedTab = 0;

添加了 plnkr： http ://plnkr.co/edit/nFMFmaGpLUwJPxRd1TpT?p=preview

Answer 1

引用Angularmaterial文档md-tab

请注意，如果您使用<md-tab-label>，您的内容必须包含在<md-tab-body>标签中。这是为了在选项卡内容和选项卡标签之间定义一个清晰的分隔。

那么您可以尝试将代码更改为：

<md-tabs>
    <md-tab ng-repeat="tab in tabs">
        <md-tab-label>{{tab.titre}}</md-tab-label>
        <md-tab-body class="md-padding">
            content tab
        </md-tab-body>
    </md-tab>
</md-tabs>