Как изменить значок переключателя mat-extension-panel? - PullRequest
Новая
       52

Как изменить значок переключателя mat-extension-panel?

0 голосов
/ 16 июня 2019

Значением по умолчанию для переключения mat-expansion-panel является >.Установка hideToggle true просто скрывает значок переключения.Есть ли способ изменить это?Я ничего не нашел в официальной документации.Я хочу использовать значок + или -, если состояние закрыто или открыто соответственно.

Ответы [ 2 ]

3 голосов
/ 16 июня 2019

Как указано на Панели расширения угловых материалов Документация , мы можем настроить стили mat-extension-panel-header, что, в свою очередь, позволит вам настроить значки.

Прежде всего, вы скрываете исходный значок, устанавливая атрибут hideToggle в значение false.Кроме того, мы присваиваем привязки событий (opened) и (closed) свойству panelOpenState.Вы можете проверить другие свойства mat-expansion-panel сверх здесь . 

<mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"hideToggle="true">

Далее, на вашем mat-panel-description вы включите необходимые пользовательские значки.Отображаемые значки будут зависеть от состояния панели.В этом примере мы используем значки из Значки материалов . 

<mat-panel-description>
  <mat-icon *ngIf="!panelOpenState">add</mat-icon>
  <mat-icon *ngIf="panelOpenState">remove</mat-icon>
</mat-panel-description>

. Я отредактировал исходный образец из документации Angular так, чтобы он использовал пользовательские + иminus значки для обозначения развернутого / свернутого состояния mat-extension-panel.Вы можете получить доступ к демоверсии через здесь .

0 голосов
/ 16 июня 2019

Вы можете использовать mat-icon в mat-expansion-panel-header.

. Пожалуйста, проверьте этот рабочий пример на stackblitz.

Для значка + вы можете использовать<mat-icon>add</mat-icon>

<mat-accordion>
  <mat-expansion-panel hideToggle>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Personal data
      </mat-panel-title>
      <mat-icon>add</mat-icon>
  </mat-expansion-panel-header>

  <mat-form-field>
      <input matInput placeholder="First name">
  </mat-form-field>

  <mat-form-field>
     <input matInput placeholder="Age">
  </mat-form-field>
</mat-expansion-panel>
...