Angular Material 2：如何在右下角的md-table顶部放置fab按钮？

Question

我有一个md表，显示了一些记录和下面的分页符。我想在桌子上显示一个fab按钮（内容表将在它下面运行）。

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

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

Answer 1

下面的代码符合要求，但被称为直接解决方案非常脏。

我在玩位置时做了什么：固定，边距，z-index和底部是我在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>

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

Answer 2

你可以将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

注意：由于您提到“内容表将在其下运行”，我将margin-top: 50px添加到表中以将其定位在按钮下方。

Answer 3

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