javascript - Angular Material - md-toolbar 内的 md-tabs。 md-toolbar 中其他元素旁边的 md-tabs

Question

我想在 md-toolbar 中使用 mf-tabs，我使用 Sithdown 在 https://github.com/angular/material/issues/1076 中提供的解决方案

它对我来说很好用，但我的问题是我需要在 md-toolbar 中的其他元素旁边放置 md-tabs，但是现在，md-tabs 总是在其他元素的下面，就像这样:

图片示例: http://imgur.com/SSVaet9

我的代码:

<md-toolbar>
     <span>saddsa</span>
     <md-tabs md-selected="selectedIndex" style="padding-top: 16px;">
        <md-tab ng-repeat="tab in tabs track by $index" id="tab{$index + 1}" aria-controls="tab{$index + 1}-content">
            {{tab.title}}
        </md-tab>
    </md-tabs>
</md-toolbar>

<md-tabs md-dynamic-height md-selected="selectedIndex" style="display: none">
    <md-tab ng-repeat="tab in tabs track by $index" label="tab.title">
        {{tab.content}}
    </md-tab>
</md-tabs>

我在 Plunker 上的代码: http://plnkr.co/edit/guKrRzB9F34mlFDqj4AS?p=preview

Answer 1

检查一下，angular-material2 github 有一些演示应用程序示例。这将在工具栏中创建选项卡。 https://github.com/angular/components/blob/master/src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.html

基本上，我们需要使用md-tab-nav-bar <div> 中的属性(property).我有类似的情况，正在寻找答案。我已经更新了他们的代码以包含 md-toolbar .这是我的例子:

`<div class="demo-nav-bar">
  <md-toolbar color="accent">
      <nav md-tab-nav-bar aria-label="weather navigation links">
    <a md-tab-link>
      tab1
    </a>
    <a md-tab-link>
      tab2
    </a>
  </nav>
  </md-toolbar>
</div>
`

CSS:

`.demo-nav-bar {
  border: 1px solid #e0e0e0;
  margin-bottom: 40px;

}
`