текст в значках материалов в mat-выравнивание панели инструментов

#angular #css #angular-material #material-design

#angular #css #angular-материал #материал-дизайн

Вопрос:

Я использую angular material, mat-toolbar для создания панели инструментов. Мне нужно, чтобы значок mat и связанный текст были выровнены друг с другом (в две строки и по центру)

Код:

 <mat-toolbar class="secondary-toolbar">
  <button mat-icon-button>
    <mat-icon>apps</mat-icon>
    Dashboard
  </button>
</mat-toolbar>

Этот код отображает изображение, как показано ниже:

Однако я требую, чтобы это было что-то вроде этого:

Ответ №1:

Добавьте на панель инструментов идентификатор диапазона, такой как класс или id.

 <span id="Dashboard">Dashboard</span>

Затем добавьте гибкий стиль отображения .

 #Dashboard
{
 display: flex;
 }

Пример Stackblitz.

1. огромное спасибо, что помогли мне с этим. Если у меня есть более одной кнопки на панели инструментов рядом друг с другом, выравнивание смещено вверх, как это работает с flex?

2. Просто для добавления здесь, вместо увеличения высоты панели инструментов, вы могли бы переместиться <span id="Dashboard">Dashboard</span> немного выше, используя margin-top: -20px

3. Не могли бы вы, пожалуйста, сообщить мне, как это работает с несколькими элементами на панели инструментов

4. Что вы имеете в виду? можете ли вы привести пример?

Ответ №2:

Вы можете сделать это с помощью гибкого дисплея.

css

 .secondary-toolbar button{
  display: flex;
  flex-direction: column;
}

1. Я попробовал это без какой-либо удачи, значок и текст в режиме строки, а не столбца. Спасибо.

2. Я добавил идентификатор в dashboard span: <span id=»Панель инструментов»> Панель инструментов</span> и добавил это в css: #Dashboard{ display: flex; }, который работает у меня.

3. @AmitBaranes это соответствует предложению Амитчигадани?

4. Я добавил этот код к примеру stackblitz, которым вы поделились.

Ответ №3:

Попробуйте это

 .button-icon-text {
    width: unset;
}

<button mat-icon-button class="button-icon-text" aria-label="Example icon-button with menu icon and text">
    <mat-icon>menu</mat-icon>
    <span>Menu</span>
</button>