动态排列 md-dialog 标签

Question

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

如您所见，选项卡（“DESCRIPTION、MEANS、...）没有通过可用的 space 均匀排列。我尝试了 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 check this

中添加 md-stretch-tabs="always"

动态排列 md-dialog 标签

dynamically arrange md-dialog labels

html

javascript

flexbox

angularjs

angular-material