Я хочу установить одно слово в предложении, чтобы иметь цвет md-primary, а другое слово - цвет акцента. Я предположил что-то вроде этого:
<div>
Hello <span class="md-primary">friend</span>.
How are <span class="md-accent">you</span>?
</div>
Но эти классы работают только для некоторых определенных компонентов.
Каким образом это сделать?
Я просто смог сделать это, используя Angular Материал 1.1.0.
Вы используете директиву md-colors, аналогичную тому, как вы бы ng-class:
<span md-colors="{color:'primary'}">...</span>
Приведенный выше код окрасит текст в основной цвет. Объект, который вы передаете в md-colors, использует ключ как свойство css (например, "цвет", "фон" и т.д.) И значение в качестве темы и/или палитры и/или оттенка, который вы хотите использовать.
Angular Материал docs явно перечисляет список компонентов, которые вы можете отличить от атрибута md-theme:
мкр-кнопка
мкр-флажок
мкр-прогресс круговой
мкр-прогресс-линейный
мкр-радио-кнопка
мкр-слайдер
мкр-переключатель
мкр-язычки
мкр-текст-поплавок
мкр-панель инструментов
От Angular Документация по материалам в разделе Theming/Declarative Syntax.
Итак, я думаю, что короткий ответ: вы не можете этого сделать.
EDITED 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: извините за английский, пришли из Тайваня:)
Я думаю, что единственный способ - создать собственную пользовательскую палитру, как показано в документах: https://material.angularjs.org/latest/#/Theming/03_configuring_a_theme в разделе "Определение пользовательской палитры". Там вы можете определить "contrastDefaultColor" как светлый или темный. Если я прав, это должно сделать это.
Тем не менее, я хочу использовать стандартную палитру и переопределить цвет текста для подсветки, а не определять целую новую палитру.
Вы также можете (и я предлагаю это) расширить существующую палитру с помощью 'extendPalette'. Таким образом, вам не нужно будет определять весь оттенок, но только соответствующим образом установите "contrastDefaultColor".
* edit: просто протестировано решение
Добавьте это в свою конфигурационную функцию (посмотрите пример кода 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.
Таким образом, это изменило цвет только на свет, а не на определенный цвет. Поэтому он не ответил на ваш вопрос, но все же может пригодиться.
Битвы латтетов приносят хорошие новости для этой проблемы... Эта функциональность была добавлена к версии 1.1.0-rc3 (2016-04-13). Это еще не стабильно, но мой первый тест на нем удовлетворительный.
Теперь вы можете использовать директиву mdColors и службу $mdColors в сочетании с темами для достижения того, что вы ищете.
Пожалуйста, взгляните на:
https://github.com/angular/material/blob/master/CHANGELOG.md#110-rc3-2016-04-13
чтобы увидеть объявление, и посмотрите на директиву mdColor и службу $mdColor в документах для некоторых примеров.
Этот ответ устарел, пожалуйста, проверьте ответ @factalspawn
С "чистым" angular -материалом вы не можете. Но вы можете попробовать использовать это: https://gist.github.com/senthilprabhut/dd2147ebabc89bf223e7
в github есть проблема, которая устраняет это, как упомянуто выше Комментарий TitForTat в этом выпуске почти имел идеальное решение, но он не работает с палитрами для костюмов, я добавляю комментарий там с помощью фиксированное решение, вы можете проверить это: https://github.com/angular/material/issues/1269#issuecomment-124859026
Якорный элемент() реагирует на установку темы Angular Material current theme с version 1.0.0-rc1: https://github.com/angular/material/blob/master/CHANGELOG.md#110-rc1-2016-03-09.
Для меня я предполагаю все, что начинается с md- вы можете применять к ним только цвета тем.
В документации есть некоторые компоненты, которые не документированы, где вы можете использовать цвета тем. Пример:
<md-subheader class="md-warn"> my subheader </md-subheader>
<md-icon class="md-accent"> </md-icon>