web-dev-qa-db-ja.com

angularマテリアルデザイン-カスタムボタンの色を追加

「primary」、「warn」などに似た独自のカスタムカラーを追加したい。たとえば、オレンジ色の背景のクラスを追加したが、カラー属性ではなくクラスとして使用した。動作しますが、コードはわかりにくいようです。

<button md-raised-button color="primary" class="btn-w-md ml-3 orange-500-bg"><i class="material-icons">description</i> Deactivate</button>

color="orange"を追加するには何をする必要がありますか？

angularmaterial-designangular-material2
17
Shaniqwa

背景色がオレンジのクラスを定義し、それをクラス属性として使用することにより、通常のcssの方法でのみボタンの色を変更できます。

Color = "orange"として使用する必要がある場合。次に、必要な色で独自のテーマを作成する必要があります。 angular素材アプリのテーマ設定 を参照してください。要素ごとにカスタマイズすることもできます。 カスタマイズ を通じて、要素に基づいて異なるテーマを選択できます

ただし、color = "orange"のように使用することはできません。必要に応じて、オレンジをプライマリカラーまたはアクセントカラーとして定義し、color = "primary"またはcolor = "accent"として使用できます。

テーマには、異なる色の次のアイテムのみを含めることができます

  • 主なパレット：すべての画面とコンポーネントで最も広く使用されている色。
  • アクセントパレット：フローティングアクションボタンとインタラクティブ要素に使用される色。
  • 警告パレット：エラー状態を伝えるために使用される色。
  • 前景パレット：テキストとアイコンの色。
  • 背景パレット：要素の背景に使用される色。
14
Kowsalya

以下のような任意の色を追加できます

 <a mat-mini-fab [color]="'success'" routerLink=".">link</a>
.mat-success {
    background-color: green;
    color: #fff;
}
40
Gopi

この答えは、angular/cliおよびangularマテリアルを使用したangular 5.1.1プロジェクトのコンテキストにあります5.1。

Mat -...は親からその色を継承しているようですので、spanまたはdivで囲み、そこに色を適用すると、それは落ちます。私の特定のユースケースでは、アイコンの色を動的に設定したいと考えていました。最初の実装と新しい実装は次のとおりです。

このクラス割り当ては、mat-iconクラスをオーバーライドします。これは動作するように見えますが、もう動作しません：

<mat-icon [class]="custom-class">icon name</mat-icon>

これでラップできます：

<span [class]="custom-class"><mat-icon>icon name</mat-icon></span>

最初のケースでは、「アイコン名」という言葉が必要に応じて色付けされますが、アイコンはありません。 2番目のケースは、望ましい動作につながります。

3
Matthew Bowers

コンポーネントレベルで参照されるスタイルシートを使用する

.mat-button, .mat-raised-button{
    background-color:red;
}

注：コンポーネントレベルでスタイルシート参照を宣言します。 LIVE DEMO

2
Aravind