Angular 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> 

Answer 2

添加

disablePagination

对我有用：

尝试

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