angularjs - Angular Material タブにタイトルが正しく表示されない

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>