Question

我想在md-toolbar中有mf-tabs，我在https://github.com/angular/material/issues/1076

中使用Sithdown提供的解决方案

它适用于我，但我的问题是我需要在md-toolbar内的其他元素旁边有md-tabs，但是现在，md-tabs总是在其他元素的下面，就像那样：

我的代码：

<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有一些demo-app示例。这将在工具栏中创建选项卡。 https://github.com/angular/material2/blob/master/src/material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.html#L7

基本上，我们需要在md-tab-nav-bar中使用<div>属性。我有类似的情况，正在寻找答案。我已将其代码更新为包含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;

}
`

Answer 2

md-tabs.md-default-theme md-tabs-ink-bar {
    /* color: #ffff85; */
    /* background: #ffff85; */
}

删除css中的这些行

角度材质 - md工具栏中的md-tabs。 md-toolbar

2 个答案: