首页 文章

Angular Material 5设置fab按钮默认颜色

提问于
浏览 次
0

我正在使用Anuglar Material（5.0.4），我希望 mat-fab-button 默认背景颜色为白色，就像在Angular examples中一样 . 然而对我来说，背景颜色是出于某种原因的强调色 .

enter image description here

HTML

<h2>Fab Buttons</h2>
<div>
  <button mat-fab>Basic</button>
  <button mat-fab color="primary">Primary</button>
  <button mat-fab color="accent">Accent</button>
  <button mat-fab color="warn">Warn</button>
  <button mat-fab disabled>Disabled</button>
  <button mat-fab>
    <mat-icon aria-label="Example icon-button with a whats hot icon">whatshot</mat-icon>
  </button>
  <a mat-fab routerLink=".">Link</a>
</div>

<h2>Mini Fab Buttons</h2>
<div>
  <button mat-mini-fab>Basic</button>
  <button mat-mini-fab color="primary">Primary</button>
  <button mat-mini-fab color="accent">Accent</button>
  <button mat-mini-fab color="warn">Warn</button>
  <button mat-mini-fab disabled>Disabled</button>
  <button mat-mini-fab>
    <mat-icon aria-label="Example icon-button with a whats hot icon">whatshot</mat-icon>
  </button>
  <a mat-mini-fab routerLink=".">Link</a>
</div>

Theme

$deeporange-teal-amber-theme-primary: mat-palette($mat-deep-orange, 500, 100, 700);
$deeporange-teal-amber-theme-accent: mat-palette($mat-teal);
$deeporange-teal-amber-theme-warn: mat-palette($mat-amber);

$deeporange-teal-amber-theme: mat-light-theme(
  $deeporange-teal-amber-theme-primary,
  $deeporange-teal-amber-theme-accent,
  $deeporange-teal-amber-theme-warn);

奇怪的是 mat-raised-button 有一个白色背景 .

angular angular-material floating-action-button

2 回答

  • 2

    在docs中，它说的是主题：

    默认情况下，只有FAB（浮动操作按钮）被着色; mat-button和mat-raised-button的默认背景颜色与主题的背景颜色相匹配 .

    如果您尝试在stackblitz上的示例代码，您将看到没有 color 属性的FAB也被着色 . （我不知道为什么文档中嵌入的示例的行为是不同的 . ）

    如果您希望FAB为白色，只需将color属性留空：

    <button mat-fab color="">Basic</button>
    回复于
  • 0

    你可以用你想要的颜色来设置它的样式 <button style="background-color:firebrick" mat-fab>Sell</button>

    回复于

相关问题