角度md-tab需要更多的空间来显示标签

我有一个300px的有限宽度。在那里，我需要显示两个选项卡（A & B），空间足以显示A & B作为选项卡。角度md-tab需要更多的空间来显示标签

当使用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>

来源

2017-06-02 jaks

是不敏感？它必须缩小自己 – Aravind

它是为材料1还是材料2？ – Nehal

假设它对于材质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>

来源

2017-06-02 20:36:56 Nehal

角度md-tab需要更多的空间来显示标签

回答

相关问题