Angular md-tab需要更多空间来显示选项卡

Question

我的宽度有限，为300px。在那里，我需要显示两个标签（A＆amp; B），空间足以显示A＆amp; B 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

假设它为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>