javascript - 动态排列 md-dialog 标签

Question

我的选项卡对话框如下所示:

正如您所看到的，选项卡(“DESCRIPTION，MEANS，...)没有在可用空间中均匀排列。我尝试了 flex 指令，但它不起作用。

我的 html 是这样的(缩短):

    <md-toolbar>
  <div class="md-toolbar-tools">
    <h2>{{error}}</h2>
    <span flex></span>
    <md-button class="md-icon-button" ng-click="cancel()">
      <md-icon md-svg-src="../../../assets/img/close.svg" aria-label="Close dialog"></md-icon>
    </md-button>
  </div>
</md-toolbar>
<md-dialog-content style="max-width:800px;max-height:1400px;min-width:800px; ">
  <md-tabs md-dynamic-height md-border-bottom>
    <md-tab label="description">
      <md-content class="md-padding">
        <h1 class="md-display-2">Description</h1>
        <p flex>{{description}}</p>
      </md-content>
    </md-tab>
    <md-tab label="means">
      <md-content class="md-padding">
        <h1 class="md-display-2">Means</h1>
        <p>{{means}}</p>
      </md-content>
    </md-tab>

有什么办法可以实现我想要的这种标签排列吗？

Answer 1

在 md-tabs 中添加 md-stretch-tabs="always"check this