Angulaire Matériel 2 : Comment mettre un fab bouton situé sur le dessus de la md-table dans le coin inférieur droit?

J'ai un md-tableau montrant certains dossiers et un paginator ci-dessous. J'en veux pour preuve un fab bouton sur la table (la table de contenu irait à l'exécution).

Ce que j'ai essayé?
J'ai essayé <a md-mini-fab routerLink="." style=""><md-icon>check</md-icon></a> à l'intérieur de la <md-table #table [dataSource]="dataSource" mdSort> </md-table> balises , mais on dirait que tout est sous md-table est mis au rebut et les lignes de la table sont ensuite rendus par le material2 composant de Tableau .

Est-il propre(sans utiliser beaucoup de CSS, en utilisant seulement les classes) solution pour cela? Si non qu'est-ce que le CSS en fonction de la solution?

où exactement dans le tableau êtes-vous en essayant de le mettre?
Au-dessus de la table(z-index) , en bas à droite .

OriginalL'auteur Aakash Uniyal | 2017-08-08

  1. 7

    Le code ci-dessous répond aux exigences, mais elle est assez sale pour être appelée droite de l'avant de la solution.

    Ce que j'ai fait en jouant avec la position : fixe , la marge , les z-index et le fond était que j'ai fait une div juste en dessous de la md-table (sur le niveau de 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>

    Angulaire Matériel 2 : Comment mettre un fab bouton situé sur le dessus de la md-table dans le coin inférieur droit?

    Remarque : Serait-mise à jour de la réponse, ou de Poster une nouvelle si une meilleure solution soit trouvée.

    OriginalL'auteur Aakash Uniyal

  2. 4

    Vous pouvez envelopper le md-table et md-mini-fab à l'intérieur d'un div. Ensuite, vous pouvez utiliser position: absolute pour faire flotter le bouton sur le dessus de la md-table et l'utilisation right et top propriétés 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;
}

    Plunker démo

    Remarque: Puisque vous avez mentionné "la table de contenu irait à sous", j'ai ajouté margin-top: 50px à la table pour le positionner en dessous du bouton.

    Salut nehal ce n'est pas la bonne solution , la position absolue rendrait le bouton être positionné à partir du haut de l'écran plutôt qu'à l'intérieur de la div . Essayez d'ajouter <br> balises juste avant <div class="example-container mat-elevation-z8"> et vous savez de quoi je parle 😀
    Si je l'ai résolu de la même façon serait de publier la réponse sous peu . Mais ce faisant, une position absolue n'est pas que jolie, c'est à peine fonctionnelle . Merci pour la réponse, cependant .

    OriginalL'auteur Nehal

  3. -6

    Utilisation class="md-fab md-fab-bottom-right"

    downvoted, cette réponse n'est pas pour angular2+

    OriginalL'auteur Andrés Martín D'Oria