43

文の 1 つの単語を md-primary color に設定し、別の単語をアクセント カラーに設定したいと考えています。私は次のようなものを想定しました：

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

ただし、これらのクラスは特定のコンポーネントに対してのみ機能します。

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

4

9 に答える 9

6

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}}'; }

angular-material.js の 13783 行に

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>

できます。

ps: 英語ですみません、台湾から来ました :)

于 2015-06-03T18:17:36.820 に答える
0

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

于 2016-06-01T09:31:56.750 に答える
0

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

「純粋な」Angular-Materialではできません。ただし、これを使用して試すことができます: https://gist.github.com/senthilprabhut/dd2147ebabc89bf223e7

于 2015-07-08T12:20:55.673 に答える
-6

私にとっては、md で始まるすべてのものを想定しています。テーマの色のみを適用できます。

ドキュメントには、テーマの色を使用できるドキュメント化されていないコンポーネントがいくつかあります。例：

<md-subheader class="md-warn"> my subheader </md-subheader>
<md-icon class="md-accent"> </md-icon>

于 2015-07-03T10:57:56.447 に答える