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

Question

我在 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”，位于与选项卡对齐的右侧。任何人都可以帮助我如何设计它以便在此选项卡的右侧有一个按钮吗？

谢谢

Answer 1

解决方案 1：

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

更多信息：https://ng-bootstrap.github.io/#/components/nav/overview

感谢 ngb-nav，您可以在 li 标签内插入按钮元素，对于低于 css 的位置将有效

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

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

解决方案 2

因为你需要使用ngb-tabset，我再次让buttonabsolute可以任意对齐，并添加了top:0属性来实现坚持到顶部。在 </ngb-tabset>

下添加了按钮元素

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

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

Answer 2

如果在标签集中添加段落标签，则可以在段落标签内添加按钮。可以参考下面的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%;
}

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

Angular bootstrap ngb-tabset add button to the rightside to align with tabs

angular-ui-bootstrap

angular7