角度md-tab需要更多的空間來顯示標籤

Question

我有一個300px的有限寬度。在那裏，我需要顯示兩個選項卡（A & B），空間足以顯示A & B作爲選項卡。

當使用Angular 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

假設它對於材質2，我發現默認情況下材質2選項卡設置爲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>