web-dev-qa-db-fra.com

Angular Material 2: Comment mettre un bouton fab sur le dessus de la table md dans le coin en bas à droite?

J'ai un md-table montrant quelques enregistrements et un paginateur ci-dessous. Je veux montrer un bouton fab sur la table (la table des matières se déroulerait en dessous).

Qu'est-ce que j'ai essayé? J'ai essayé <a md-mini-fab routerLink="." style=""><md-icon>check</md-icon></a> à l'intérieur de <md-table #table [dataSource]="dataSource" mdSort> </md-table> tags, mais ressemble à tout sous md-table est supprimé et les lignes du tableau sont ensuite rendues par le composant Material2 Table.

Existe-t-il une solution propre (sans utiliser beaucoup de CSS, tout en utilisant uniquement des classes)? Sinon, quelle est la solution basée sur CSS?

htmlcssangularangular-material2
9
Aakash Uniyal

Le code ci-dessous répond aux exigences mais est assez sale pour être appelé solution simple.

Ce que j'ai fait en jouant avec la position: fixe, marge, index z et bas, c'est que j'ai fait un div juste en dessous de la table md (au niveau du paginateur).

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

enter image description here

Remarque: mettrait à jour la réponse ou en publierait une nouvelle si une meilleure solution était trouvée.

8
Aakash Uniyal

Vous pouvez envelopper le md-table et md-mini-fab à l'intérieur d'un div. Ensuite, vous pouvez utiliser position: absolute pour flotter jusqu'au bouton en haut de md-table et utilisez les propriétés right et top css pour régler la position du bouton.

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

Démo Plunker

Remarque: Puisque vous avez mentionné "la table des matières se déroulerait sous elle", j'ai ajouté margin-top: 50px au tableau pour le positionner sous le bouton.

4
Nehal