Mat-toolbar內容對齊方式

Question

我想在此示例中將內容左右對齊。

https://material.angular.io/components/toolbar/examples

我想要圖標在左側，文本在中間，用戶名在最右邊。

我怎樣才能做到這一點？

Answer 1

您可以執行以下操作來完成此操作。

將mat-icon移到容器的頂部，使其首先放置。

 <mat-toolbar-row>
   <mat-icon class="example-icon">verified_user</mat-icon>

將example-spacer類應用於中間所需的文本。

<span class="example-spacer">Second Line</span>

將以下內容添加到toolbar-multirow-example.css的example-spacer類中

text-align: center;

之后的用戶名

<span>User Name</span>

Stackblitz