javascript - Angular Material 选项卡不起作用(md-tabs)

Question

使用 Angular Material 打开一个在内容正文中使用选项卡的对话框 ( https://material.angularjs.org/latest/demo/dialog )。现在弹出对话框，但我可以看到第一个选项卡的内容，但看不到从一个选项卡切换到另一个选项卡的选项卡选项。添加 html 片段:

    <md-dialog-content style="max-width:800px;max-height:810px; ">
      <md-tabs md-dynamic-height md-border-bottom>
        <md-tab label="one">
          <md-content class="md-padding">
            <h1 class="md-display-2">Tab One</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.</p>
          </md-content>
        </md-tab>
        <md-tab label="three">
          <md-content class="md-padding">
            <h1 class="md-display-2">Tab Three</h1>
            <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
          </md-content>
        </md-tab>
      </md-tabs>
    </md-dialog-content>

Answer 1

Angular Material 不能很好地计算宽度。这发生在我身上，我修复了它，将 md-stretch-tabs="always" 添加到 md-tabs 并删除父容器上的 Flex:

<div>
    <md-content>
        <md-tabs md-dynamic-height md-stretch-tabs="always" md-border-bottom>
            <md-tab label="three">
                <md-content class="md-padding">
                    <h1 class="md-display-2">Tab Three</h1>
                    <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum.</p>
                </md-content>
            </md-tab>
        </md-tabs>
   </md-content>
</div>

进行此更改可以使 AngularJS 很好地计算选项卡的大小调整。请小心，不要在 md-tabs 容器上使用 flex，因为它会在某些情况下失败。