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

Posted 2023-03-05

【中文标题】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?

【发布时间】：2018-01-15 20:05:03

【问题描述】：

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

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

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

【问题讨论】：

你想把表格放在哪里？

表格上方（z-index），右下角。

【参考方案1】：

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

我在使用 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>

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

【参考方案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 添加到表格中以将其放置在按钮下方。

【讨论】：

嗨 nehal 这不是正确的解决方案，绝对位置会使按钮从屏幕顶部定位，而不是在 div 内。尝试在<div class="example-container mat-elevation-z8"> 之前添加 标签，您就会知道我在说什么：D

虽然我已经通过类似的方式解决了它，但很快就会发布答案。但是做一个绝对位置并不是那么漂亮，它几乎没有功能。不过谢谢你的回答。

【参考方案3】：

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