Angular Material 2 : 如何在右下角的md-table 上面放置一个fab 按钮？

Question

我有一个 md-table 显示一些记录和下面的分页器。我想在 table 上显示一个 fab 按钮（内容的 table 将在其下方显示运行）。

我试过什么？我在 <md-table #table [dataSource]="dataSource" mdSort> </md-table> 标签内尝试了 <a md-mini-fab routerLink="." style=""><md-icon>check</md-icon></a>，但看起来 md-table 下的所有内容都被废弃了，然后 table 行由 material2 Table 组件呈现。

是否有一个干净的（不使用大量 CSS，而只使用类）的解决方案？如果不是，基于 CSS 的解决方案是什么？

Answer 1

您可以将 md-table 和 md-mini-fab 包裹在 div 中。然后，您可以使用 position: absolute 浮动到 md-table 顶部的按钮，并使用 right 和 top css 属性来调整按钮的位置.

html:

<div class="example-container mat-elevation-z8">
  <a md-mini-fab class="custom-button"><md-icon>check</md-icon></a>
  <md-table #table [dataSource]="dataSource" style="margin-top: 50px">
    ...
    ...
    ...
  </md-table>
</div>

css:

.custom-button{
  position: absolute;
  right: 30px;
  top: 15px;
}

Plunker demo

注意：由于您提到了 "the table of content would run under it"，我将 margin-top: 50px 添加到 table 以将其放置在按钮下方。

Answer 2

下面的代码符合要求，但被称为直截了当的解决方案是相当肮脏的。

我在玩 position : fixed 、 margin 、 z-index 和 bottom 时所做的是，我在 md-table 下方（在分页器级别）制作了一个 div 。

<div style="z-index:5; position : fixed;display : flex; 
align-self : flex-end;bottom : 10%; margin-bottom : 68px;">

<a md-mini-fab routerLink="." style="margin-right : 14px;" (click) = 
"tShowAdu()"><md-icon>add</md-icon></a>
<a md-mini-fab routerLink="/main/create" style="margin-right : 14px;"><md-icon>add</md-icon></a>

</div>

注意：如果找到更好的解决方案，将更新答案或 Post 新答案。

Answer 3

使用class="md-fab md-fab-bottom-right"

Angular Material 2 : 如何在右下角的md-table 上面放置一个fab 按钮？

Angular Material 2 : How to put a fab button on top of the md-table at the bottom right corner?

html

css

angular-material2

angular