web-dev-qa-db-ja.com

Angular-Materialでテキストの色を設定する方法は？

文の1つのWordにmd-primaryカラーを設定し、別のWordにアクセントカラーを設定したい。私はこのようなものを想定しました：

<div>
    Hello <span class="md-primary">friend</span>. 
    How are <span class="md-accent">you</span>?
</div>

ただし、これらのクラスは、指定された一部のコンポーネントでのみ機能します。

それを行う方法は何ですか？

angularjs-material
39
Maor

Angular Material 1.1.0。を使用してこれを行うことができました。

md-colorsディレクティブと同様のng-classディレクティブを使用します。

<span md-colors="{color:'primary'}">...</span>

上記のコードは、テキストを原色に色付けします。 md-colorsに渡すオブジェクトは、キーをcssプロパティ（つまり、 'color'、 'background'など）として使用し、値を使用したいテーマやパレット、色相として使用します。

ソースドキュメント

61
coblr

Angular Material のドキュメントは、md-theme属性で区別できるコンポーネントのリストを明示的に列挙します。

mdボタン
md-checkbox
md-progress-circular
md-progress-linear
md-radio-button
md-slider
mdスイッチ
md-tabs
md-text-float
md-toolbar

Angular Material documentation から、テーマ/宣言構文の下で。

だから私は短い答えだと思う：あなたはそれをすることはできない。

14
Zhorzh Alexandr

編集済み2015/07/23

TitForTatのコメントにはより良い解決策があります https://github.com/angular/material/issues/1269#issuecomment-121303016

モジュールを作成しました：

(function () {
        "use strict";
        angular
            .module('custiom.material', ['material.core'])
            .directive('cMdThemeFg', ["$mdTheming", function ($mdTheming) {
                return {
                    restrict: 'A',
                    link: postLink
                };
                function postLink(scope, element, attr) {
                    $mdTheming(element);
                    element.addClass('c-md-fg');
                }

            }])
            .directive('cMdThemeBg', ["$mdTheming", function ($mdTheming) {
                return {
                    restrict: 'A',
                    link: postLink
                };
                function postLink(scope, element, attr) {
                    $mdTheming(element);
                    element.addClass('c-md-bg');
                }
            }]);
    })();

そして追加

.c-md-fg.md-THEME_NAME-theme.md-primary {    color: '{{primary-color}}'; }
.c-md-fg.md-THEME_NAME-theme.md-accent {    color: '{{accent-color}}'; } 
.c-md-fg.md-THEME_NAME-theme.md-warn {    color: '{{warn-color}}'; } 
.c-md-bg.md-THEME_NAME-theme.md-primary {    background-color: '{{primary-color}}'; } 
.c-md-bg.md-THEME_NAME-theme.md-accent {    background-color: '{{accent-color}}'; } 
.c-md-bg.md-THEME_NAME-theme.md-warn {    background-color: '{{warn-color}}'; }

13783行でangular-material.jsに

angular.module("material.core").constant("......  HERE")

その後、単純にc-md-theme-fgやc-md-theme-bgを要素に適用して、テーマの色を適用できます。このような：

<div c-md-theme-bg class="md-primary md-hue-3">dasdasdasd</div>
<span c-md-theme-bg class="md-primary">test</span>

できます。

追伸：英語については申し訳ありませんが、台湾から来ました:)

6
Hsin-Yu Chen

唯一の方法は、ドキュメントに示されている独自のカスタムパレットを作成することだと思います： https://material.angularjs.org/latest/#/Theming/03_configuring_a_theme カスタムパレットの定義の段落の下。そこで、「contrastDefaultColor」を明るい色または暗い色に定義できます。私が正しければ、それはそれを行う必要があります。

ただし、まったく新しいパレットを定義するのではなく、標準のパレットを使用して、テキストの色を明るくしたいです。

「extendPalette」を使用して既存のパレットを拡張することもできます（これをお勧めします）。この方法では、すべての色相を定義する必要はなく、それに応じて「contrastDefaultColor」のみを設定します。

*編集：ソリューションをテストしたばかり

これを設定関数に追加します（テーマの設定について上記のリンクにあるangularコード例を探してください））

var podsharkOrange;

podsharkOrange = $mdThemingProvider.extendPalette('orange', {
  '600': '#689F38',
  'contrastDefaultColor': 'light'
});

$mdThemingProvider.definePalette('podsharkOrange', podsharkOrange);

$mdThemingProvider.theme('default').primaryPalette('podsharkOrange', {
  'default': '600'
});

600 HUEを緑色に設定して、テーマの変更が機能するかどうかを確認するだけなので、extendPaletteのその行を無視できます。

そのため、これは特定の色ではなく、色を明るい色に変更しただけです。したがって、あなたの質問には答えませんでしたが、まだ役に立つかもしれません。

3
Mattijs

最新版はこの問題に良いニュースをもたらします...この機能は1.1.0-rc3（2016-04-13）バージョンに追加されました。まだ安定していませんが、私の最初のテストは満足です。

これで、mdColorsディレクティブと$ mdColorsサービスをテーマと組み合わせて使用​​して、探しているものを実現できます。

ご覧ください：

https://github.com/angular/material/blob/master/CHANGELOG.md#110-rc3-2016-04-1

発表を見るには、いくつかの例についてはドキュメントでmdColorディレクティブと$ mdColorサービスを探してください。

1
Vi100

アンカー要素（）はversion 1.0.0-rc1以降のAngular Materialの現在のテーマ設定に反応しています： https://github.com/angular/material/blob/master/CHANGELOG .md＃110-rc1-2016-03-09 。

0
Samuel R

この回答は古くなっています@factalspawn answerを確認してください

「純粋な」角材ではできません。しかし、これを試してみてください： https://Gist.github.com/senthilprabhut/dd2147ebabc89bf223e7

0
Styx

前述のように、この問題に関するTitForTatのコメントはほぼ完璧な解決策を持っていましたが、コスチュームパレットでは機能しません。修正された解決策でコメントを追加し、それをチェックアウトできます： https://github.com/angular/material/issues/1269#issuecomment-124859026

0
Daniel Jakobsen Hallel