Мат-панель инструментов контента alignmnet

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>

Добавьте следующее к example-spacer классу в toolbar-multirow-example.css

text-align: center;

Имя пользователя после этого

<span>User Name</span>

Stackblitz

https://stackblitz.com/edit/angular-tesmev?embed=1&file=app/toolbar-multirow-example.html