angularjs - 如何向 Angular Material Tabs 添加内容

Question

我正在尝试在我的工具栏中放置带有 Angular Material 的选项卡。

我找到了一个很好的例子:

<md-toolbar layout="row" layout-align="center end">
    <div flex flex-sm="100" flex-gt-sm="95" flex-gt-md="80" layout="column">
        <span flex></span>
        <md-tabs  md-stretch-tabs="always" class="md-primary">
            <md-tab id="tab1" aria-controls="Tab 1">
                <md-tab-label>Tab 1</md-tab-label>
            </md-tab>
            <md-tab id="tab2" aria-controls="Tab 2">
                <md-tab-label>Tab 2</md-tab-label>
            </md-tab>
        </md-tabs>
    </div>
</md-toolbar>

完美，除了我不确定如何添加内容。

如果我输入 <md-tab-body> <md-tab> 内的标签标记然后工具栏展开并且新内容位于工具栏内，这是我不想要的。我希望选项卡内容位于工具栏下方。

我刚开始研究 Angular Material ，所以我觉得我缺少一些基本的东西。

查看选项卡文档似乎使用带有外部内容的选项卡可能有用，但是文档没有说明如何做到这一点。

Answer 1

我认为这应该对你有帮助，我是新手但是通过阅读文档代码 here ,我发现可以使用md-tab-body添加内容。所以我试着让你看到这个 codepen .我在 md-tab-label 下面添加了 md-tab-body。希望这对你有帮助。感谢您向我展示这么好的设计资料。

在这里添加我的代码:

<md-toolbar layout="row" layout-align="center end">
<div flex flex-sm="100" flex-gt-sm="95" flex-gt-md="80" layout="column">
    <span flex></span>
    <md-tabs  md-stretch-tabs="always" class="md-primary">
        <md-tab id="tab1" aria-controls="Tab 1">
            <md-tab-label>Tab 1</md-tab-label>
          <md-tab-body>
      <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-tab-body>
        </md-tab>
        <md-tab id="tab2" aria-controls="Tab 2">
            <md-tab-label>Tab 2</md-tab-label>
          <md-tab-body>
      <h1 class="md-display-2">Tab Two</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-tab-body>
        </md-tab>
    </md-tabs>
</div></md-toolbar>

编辑1好的。但我认为你的问题没有提到任何关于颜色的事情。这些也可以用 css 来完成。现在我已经更新了 codepen，你可以看到 here或 here或者这个与其他颜色 here .希望这对你有帮助。如果这对您有帮助，请评价我的回答。

编辑2好的。在网上搜索更多内容后，我发现可以使用名为 md-selected 的东西来跟踪选择了哪个选项卡。然后基于 on 该索引的值我使用 ng-switch-when 该值是该索引。它类似于普通的 Switch-case 语句。我还删除了那个 css，所以它变得更加清晰。可以看解决办法here .我希望我的解决方案对你来说是清楚的。我试图让它尽可能简单。谢谢。