Angular Material 2:如何在右下角的md表顶部放置fab按钮? [英] Angular Material 2 : How to put a fab button on top of the md-table at the bottom right corner?

问题描述

我有一个md表，下面显示一些记录和一个分页器.我想在表上显示一个fab按钮(目录将在其下运行).

I have a md-table showing some records and a paginator below. I want to show a fab button on the table (the table of content would run under it).

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

What I tried? I tried <a md-mini-fab routerLink="." style=""><md-icon>check</md-icon></a> inside the <md-table #table [dataSource]="dataSource" mdSort> </md-table> tags , but looks like everything under md-table is scrapped out and the table rows are then rendered by the material2 Table component .

是否有一个干净的解决方案(不使用大量CSS，而仅使用类)?如果不是，基于CSS的解决方案是什么?

Is there a clean(without using a lot of CSS, while using only classes) solution for it? If not what is the CSS based solution?

推荐答案

下面的代码可以满足要求，但是很脏，不能称之为直接解决方案.

The code below meets the requirements but is pretty dirty to be called straight forward solution.

我在使用位置:fixed，margin，z-index和bottom时所做的是我在md-table下方(在分页器的水平)做了一个div.

What i did while playing with position : fixed , margin , z-index and bottom was that i made a div just below the md-table (on the level of paginator).

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

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

Note : Would update the answer or Post a new one if a better solution is found.

这篇关于Angular Material 2:如何在右下角的md表顶部放置fab按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！