Angular bootstrap ngb-tabset 在右侧添加按钮以与选项卡对齐答案

【问题标题】：Angular bootstrap ngb-tabset add button to the rightside to align with tabsAngular bootstrap ngb-tabset 在右侧添加按钮以与选项卡对齐
【发布时间】：2020-04-30 01:47:40
【问题描述】：

我在我的 Angular 应用程序中使用 ngb tabset 作为选项卡。这是我正在使用的代码。

<ngb-tabset activeId="delegate-status" #tabs="ngbTabset" [activeId]="activeTab">

  <ngb-tab title="Delegate status" id="tab-delegate-status">
    <ng-template ngbTabContent class="content-container">
      <delegate-status-report></delegate-status-report>
    </ng-template>
  </ngb-tab>

  <ngb-tab title="No show" id="tab-noshow">
    <ng-template ngbTabContent class="content-container">
      <noshow-report></noshow-report>
    </ng-template>
  </ngb-tab>

</ngb-tabset>

我想要一些按钮，例如：导出到 CSV，在右侧对齐选项卡。谁能帮我设计一下这个标签的右侧有一个按钮的样式？

谢谢

【问题讨论】：

标签： angular7 angular-ui-bootstrap

【解决方案1】：

解决方案 1：

您应该使用ngbNav 而不是tabset。ngbNav 提供的元素列表允许将任何元素放入其中，并且功能与tabset 相同。

感谢ngb-nav，您可以在li 标签内插入按钮元素，并且css下方的位置将起作用

button{
  position:absolute;
  right:15px;
}

堆栈闪电战：https://stackblitz.com/edit/angular-us155y-n7tr8e?file=index.html

解决方案 2

由于您需要使用ngb-tabset，我让button absolute 再次根据需要对齐到任何位置，并添加了top:0 属性以使其粘在顶部。在</ngb-tabset>下添加按钮元素

button{
  position:absolute;
  right:15px;
  top:0;
}

堆栈闪电战：https://stackblitz.com/edit/angular-us155y-bilsj3?file=app/tabset-preventchange.html

【讨论】：

谢谢。但要求是使用 ngbtabset 实现相同的目标。
@MukilDeepthi 如果它对你有用，你能把它标记为答案吗？

【解决方案2】：

如果您在 tabset 内添加段落标签，您可以在段落标签内添加按钮。可以参考下面的html

        <p>
          <button class="btn btn-outline-primary" type="button" name="button">Edit Profile</button>
        </p>

这是我的 css 的样子，但您可以根据需要更改 css。

button {
   margin-top: -160px;
   right: 15px;
   border: none;
   background-color: green;
   color: white;
   height: 50px;
   position: absolute;
   border-radius: 0%;
}

【讨论】：