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和topcss 属性来调整按钮的位置。

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 演示

注意：由于您提到“目录将在其下方运行”，因此我将其添加margin-top: 50px到表格中以将其放置在按钮下方。