角型md-tabはタブを表示するためのスペースが必要です

Question

私は300pxの幅を持っています。そこには2つのタブ（A & B）を表示する必要があり、スペースはA & Bをタブとして表示するのに十分です。

Angled md-tab-groupを使用すると、タブで自動的に矢印アイコンが表示され、別のタブを選択するために、矢印ボタンを複数回クリックする必要があります。

タブ名は非常に小さいので、タブを表示する必要があります。

<md-tab-group class="tab-group"> 
    <md-tab label="A"> 
    TAB A 
    </md-tab> 
    <md-tab label="B"> 
    TAB B 
    </md-tab> 
</md-tab-group> 

Answer 1

material2の場合、material2のタブはデフォルトでmin-width: 160pxに設定されています。画面のサイズは300pxなので、min-widthを100pxに変更するか、必要に応じてその他の測定値を変更する必要があります。

私はそれをdemoの後にテストし、スクロールする矢印を使わずに300pxに両方のタブを合わせることができました。あなたはそれを使用して必要な正しいサイズを見つけることができます。

HTML：

<div style="width: 300px; height: 500px; border: solid 1px black"> 
    <md-tab-group> 
    <md-tab label="TAB A" style="min-width: 100px">Content 1</md-tab> 
    <md-tab label="TAB B" style="min-width: 100px">Content 2</md-tab> 
    </md-tab-group> 
</div>