Можно ли стилизовать тему кнопки в Angular Material Design - PullRequest
Новая
       9

Можно ли стилизовать тему кнопки в Angular Material Design

0 голосов
/ 09 мая 2018

известно, что в Angular Material Design вы можете настроить свою тему и даже создать несколько тем и изменять их всего одним щелчком мыши, по крайней мере, цветами.Но можно ли изменить тему, включая стиль элементов в html и css?Так, например, я держу две разные темы, в теме А кнопка должна быть круглого зеленого цвета, а в теме В кнопка должна быть синего цвета.Таким образом, вы можете переключаться между ними одним щелчком мыши, и веб-сайт будет применять его?

1 Ответ

0 голосов
/ 10 мая 2018

Похоже, вы захотите создать собственную тему. Следуйте следующим инструкциям:

  1. Включите тематику Angular Material в верхний уровень файла SCSS вашего приложения. 

    @import '~@angular/material/theming';

  2. Включает mat-core миксин. 

    @include mat-core();

  3. Добавьте несколько палитр: (См. здесь для получения полного списка палитр) 

    $my-app-primary: mat-palette($mat-deeppurple);
$my-app-accent: mat-palette($mat-amber, A200, A100, A400);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent);

  4. Включите тему в отдельную тему.

    Примечание. Вы также можете использовать классы для переключения между цветовыми темами. 

    .my-app-theme {
  @include mat-button-theme($my-app-theme);
}

  5. Затем вы можете ссылаться на это с помощью привязки свойства и ngClass. (ngClass, [class.className]) 

    <button mat-button [ngClass]="{'my-app-theme': isToggled, 'another-app-theme': !isToggled}" (click)="toggleState()" color="primary">Toggle theme</button>

    isToggled: boolean;

toggleState() {
  this.isToggled = !this.isToggled;
}

Обратите внимание на Руководство по тематике на материале Angular.

...