在 Angular Material 19 (M3) 中设置垫子按钮颜色

问题描述 投票：0回答：1

我正在使用 Angular Material 19.0.3 和 m3 主题机制 这是我的 style.scss

html {
  color-scheme: light dark;
  @include mat.theme((color: (
        primary: ft-green-theme.$primary-palette,
        tertiary: ft-green-theme.$tertiary-palette,
      ),
      typography: InterVariable,
      density: 0));

  &[dir='rtl'] {
    @include mat.theme((typography: IranSans,
      ));
  }
}

body.light {
  color-scheme: light;
}

body.dark {
  color-scheme: dark;
}

现在我有一个按钮

<button mat-flat-button >click me</button>

我以前能做到这一点

<button mat-flat-button color='danger'>click me</button>

按钮将呈红色。

但在新版本的角材料 (19) 中，他们改变了一些事情。 我尝试阅读文档，但我什么也不明白。

在 mat-button 文档中说：

按钮的主题颜色。该API仅在M2主题中支持，在M3主题中无效。

有关在 M3 中应用颜色变体的信息，请参阅 https://material.angular.io/guide/theming#using-component-color-variants。

在提供的链接中，仅解释了如何将调色板作为主题。

但是假设，我将有一个确认对话框，“是”按钮将是绿色的，“取消”按钮将是红色的。

我该如何为 19 号角形材料中的各个垫子按钮着色？？

angular angular-material material-design
1个回答
0
投票

当您使用

@include mat.theme(...)
时，一切都会在内部处理，因此无法访问
theme
（据我所知），因此您需要使用
@include mat.button-overrides(( ... ))
手动设置覆盖。

此方法可能会出现问题，因为您只想根据按钮是否为 

primary
、
secondary
等来设置按钮主题

我们可以使用

mat.button-color
定义自己的主题按钮，这个mixin需要两个参数。

/// Outputs color theme styles for the mat-button.
/// @param {Map} $theme The theme to generate color styles for.
/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
///   $color-variant: The color variant to use for the button: primary, secondary, tertiary,
///      or error (If not specified, default primary color will be used).
@mixin color($theme, $options...) {

第一个是

theme
，但是当我们使用
@include mat.theme(...)
时，我们没有将这个主题存储在SCSS属性中，因此我们可以使用之前使用
mat.define-theme
的方法，它提供了用于自定义的主题。 

$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$magenta-palette,
    ),
    density: (
      scale: 0,
    ),
  )
);

在此之后，只需将该主题输入到函数中并设置颜色变体即可。

body {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 30px;
  height: 100%;
  @include mat.all-component-themes($theme);

  .primary {
    @include mat.button-color($theme: $theme, $color-variant: 'primary');
  }

  .secondary {
    @include mat.button-theme($theme: $theme, $color-variant: 'secondary');
  }

  .tertiary {
    @include mat.button-theme($theme: $theme, $color-variant: 'tertiary');
  }

  .error {
    @include mat.button-theme($theme: $theme, $color-variant: 'error');
  }

  .neutral {
    @include mat.button-theme($theme: $theme, $color-variant: 'neutral');
  }
}

完整代码：

SCSS：

@use '@angular/material' as mat;

$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$magenta-palette,
    ),
    density: (
      scale: 0,
    ),
  )
);

body {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 30px;
  height: 100%;
  @include mat.all-component-themes($theme);

  .primary {
    @include mat.button-color($theme: $theme, $color-variant: 'primary');
  }

  .secondary {
    @include mat.button-theme($theme: $theme, $color-variant: 'secondary');
  }

  .tertiary {
    @include mat.button-theme($theme: $theme, $color-variant: 'tertiary');
  }

  .error {
    @include mat.button-theme($theme: $theme, $color-variant: 'error');
  }

  .neutral {
    @include mat.button-theme($theme: $theme, $color-variant: 'neutral');
  }
}

html {
  height: 100%;
}

@include mat.typography-hierarchy($theme);

TS：

import { Component } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { MatDividerModule } from '@angular/material/divider';
import { MatButtonModule } from '@angular/material/button';
import { CommonModule } from '@angular/common';

/**
 * @title Basic buttons
 */
@Component({
  selector: 'button-overview-example',
  templateUrl: 'button-overview-example.html',
  styleUrl: 'button-overview-example.css',
  imports: [MatButtonModule, MatDividerModule, MatIconModule, CommonModule],
})
export class ButtonOverviewExample {
  types = ['primary', 'secondary', 'tertiary', 'error', 'neutral'];
}

HTML：

@for(type of types; track $index) {
<section>
  <div class="example-label">Basic {{type}}</div>
  <div class="example-button-row">
    <button mat-button [ngClass]="type">Basic</button>
    <button mat-button disabled [ngClass]="type">Disabled</button>
    <a
      mat-button
      href="https://www.google.com/"
      target="_blank"
      [ngClass]="type"
      >Link</a
    >
  </div>
</section>
}
<mat-divider></mat-divider>
@for(type of types; track $index) {
<section>
  <div class="example-label">Raised {{type}}</div>
  <div class="example-button-row">
    <button mat-raised-button [ngClass]="type">Basic</button>
    <button mat-raised-button disabled [ngClass]="type">Disabled</button>
    <a
      mat-raised-button
      href="https://www.google.com/"
      target="_blank"
      [ngClass]="type"
      >Link</a
    >
  </div>
</section>
}
<mat-divider></mat-divider>
@for(type of types; track $index) {
<section>
  <div class="example-label">Stroked {{type}}</div>
  <div class="example-button-row">
    <button mat-stroked-button [ngClass]="type">Basic</button>
    <button mat-stroked-button disabled [ngClass]="type">Disabled</button>
    <a
      mat-stroked-button
      href="https://www.google.com/"
      target="_blank"
      [ngClass]="type"
      >Link</a
    >
  </div>
</section>
}
<mat-divider></mat-divider>
@for(type of types; track $index) {
<section>
  <div class="example-label">Flat {{type}}</div>
  <div class="example-button-row">
    <button mat-flat-button [ngClass]="type">Basic</button>
    <button mat-flat-button disabled [ngClass]="type">Disabled</button>
    <a
      mat-flat-button
      href="https://www.google.com/"
      target="_blank"
      [ngClass]="type"
      >Link</a
    >
  </div>
</section>
}
<mat-divider></mat-divider>
@for(type of types; track $index) {
<section>
  <div class="example-label">Icon {{type}}</div>
  <div class="example-button-row">
    <div class="example-flex-container">
      <button
        mat-icon-button
        aria-label="Example icon button with a vertical three dot icon"
        [ngClass]="type"
      >
        <mat-icon>more_vert</mat-icon>
      </button>
      <button
        mat-icon-button
        disabled
        aria-label="Example icon button with a open in new tab icon"
        [ngClass]="type"
      >
        <mat-icon>open_in_new</mat-icon>
      </button>
    </div>
  </div>
</section>
}
<mat-divider></mat-divider>
@for(type of types; track $index) {
<section>
  <div class="example-label">FAB {{type}}</div>
  <div class="example-button-row">
    <div class="example-flex-container">
      <div class="example-button-container">
        <button
          mat-fab
          aria-label="Example icon button with a delete icon"
          [ngClass]="type"
        >
          <mat-icon>delete</mat-icon>
        </button>
      </div>
      <div class="example-button-container">
        <button
          mat-fab
          disabled
          aria-label="Example icon button with a heart icon"
          [ngClass]="type"
        >
          <mat-icon>favorite</mat-icon>
        </button>
      </div>
    </div>
  </div>
</section>
}
<mat-divider></mat-divider>
@for(type of types; track $index) {
<section>
  <div class="example-label">Mini FAB {{type}}</div>
  <div class="example-button-row">
    <div class="example-flex-container">
      <div class="example-button-container">
        <button
          mat-mini-fab
          aria-label="Example icon button with a menu icon"
          [ngClass]="type"
        >
          <mat-icon>menu</mat-icon>
        </button>
      </div>
      <div class="example-button-container">
        <button
          mat-mini-fab
          disabled
          [ngClass]="type"
          aria-label="Example icon button with a home icon"
        >
          <mat-icon>home</mat-icon>
        </button>
      </div>
    </div>
  </div>
</section>
}
<mat-divider></mat-divider>
@for(type of types; track $index) {
<section>
  <div class="example-label">Extended Fab {{type}}</div>
  <div class="example-button-row">
    <div class="example-flex-container">
      <div class="example-button-container">
        <button mat-fab extended [ngClass]="type">
          <mat-icon>favorite</mat-icon>
          Basic
        </button>
      </div>
      <div class="example-button-container">
        <button mat-fab extended disabled [ngClass]="type">
          <mat-icon>favorite</mat-icon>
          Disabled
        </button>
      </div>
      <div class="example-button-container">
        <a mat-fab extended routerLink="." [ngClass]="type">
          <mat-icon>favorite</mat-icon>
          Link
        </a>
      </div>
    </div>
  </div>
</section>
}

Stackblitz 演示

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.