标题在角料标签中未正确显示

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 docs引用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>