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?

问题描述

我有一个 md-table 显示一些记录和下面的分页器.我想在桌子上显示一个 fab 按钮(目录将在它下面运行).

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

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

解决方案

下面的代码满足要求，但被称为直接解决方案非常脏.

我在玩 position 时所做的:fixed、margin、z-index 和 bottom 是我在 md-table 的正下方(在分页器的级别上)创建了一个 div.

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

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

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 .

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.

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-table 顶部放置一个 fab 按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！