web-dev-qa-db-ja.com

Angularマテリアル2：右下隅のmdテーブルの上にファブボタンを配置する方法は？

いくつかのレコードとページネーターを示すmdテーブルが下にあります。テーブルにfabボタンを表示したい（コンテンツのテーブルはその下で実行される）。

私が試したのは何ですか？ <a md-mini-fab routerLink="." style=""><md-icon>check</md-icon></a>タグ内で<md-table #table [dataSource]="dataSource" mdSort> </md-table>を試しましたが、md-tableの下のすべてが破棄され、テーブル行がmaterial2 Tableコンポーネントによってレンダリングされるように見えます。

きれいな（クラスのみを使用しながら、多くのCSSを使用せずに）ソリューションがありますか？そうでない場合、CSSベースのソリューションは何ですか？

htmlcssangularangular-material2
9
Aakash Uniyal

以下のコードは要件を満たしていますが、単純なソリューションと呼ばれるのはかなり汚いです。

位置、fixed、margin、z-index、bottomで遊んでいる間にしたことは、md-tableのすぐ下に（paginatorのレベルで）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>

enter image description here

注：より良い解決策が見つかった場合、回答を更新するか、新しい回答を投稿します。

8
Aakash Uniyal

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

注：「コンテンツのテーブルはその下で実行される」と述べたので、ボタンの下に配置するためにmargin-top: 50pxをテーブルに追加しました。

4
Nehal