Angular Material - md 工具栏中的 md 选项卡。 md-toolbar 内其他元素旁边的 md-tabs答案

【问题标题】：Angular Material - md-tabs inside md-toolbar. md-tabs next to other elements inside md-toolbarAngular Material - md 工具栏中的 md 选项卡。 md-toolbar 内其他元素旁边的 md-tabs
【发布时间】：2020-06-04 10:58:43
【问题描述】：

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

它对我来说很好用，但我的问题是我需要在 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

【问题讨论】：

标签： javascript css angularjs angular-material

【解决方案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

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

}
`

【讨论】：

我已经更新了我的答案...这是我的第一个答案。感谢您提供信息。
现在看起来好多了，谢谢。（顺便说一句，不是我的反对意见，我缺乏对此进行投票的领域知识。）
反对投票的任何理由..？我只是碰巧有一个带有标签的工具栏。
您发布的链接已失效。
更新了链接。

【解决方案2】：

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

在 css 中删除这些行

【讨论】：