componente component color accent angularjs-material

angularjs material - component - Cómo establecer el color del texto en Angular-Material?



material icons (9)

Quiero establecer una palabra en una oración para tener el color md-primary y otra palabra para tener el color de acento. Supuse algo así:

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

Pero esas clases solo funcionan para algunos componentes especificados.

¿Cuál es la manera de hacerlo?

Creo que la única manera es crear tu propia paleta personalizada como se demuestra en los documentos: https://material.angularjs.org/latest/#/Theming/03_configuring_a_theme en el párrafo Definición de paleta personalizada. Allí puede definir ''contrastDefaultColor'' para que sea claro u oscuro. Si estoy en lo correcto, eso debería hacerlo.

Sin embargo, quiero usar una paleta estándar y anular el color del texto a la luz, no definir una paleta completamente nueva.

También puede (y yo sugeriría esto) extender una paleta existente con ''extendPaleta''. De esta forma no tendrías que definir todos los matices, sino solo establecer el ''contrastDefaultColor'' en consecuencia.

* edit: acaba de probar una solución

Agregue esto a su función de configuración (busque ejemplo de código angular en el enlace proporcionado anteriormente sobre la configuración del tema)

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

Acabo de configurar el 600 HUE en color verde para verificar si el cambio de tema funciona, por lo que puede ignorar esa línea en el extendPalette.

Entonces esto solo cambió el color a la luz, no a un color específico. Por lo tanto, no respondió su pregunta, pero podría ser útil.

Los últimos bits traen buenas noticias sobre este tema ... Esta funcionalidad se ha agregado a la versión 1.1.0-rc3 (2016-04-13). Todavía no es estable, pero mi primera prueba es satisfactoria.

Ahora puede usar la directiva mdColors y el servicio $ mdColors junto con los temas para lograr lo que está buscando.

Por favor, eche un vistazo a:

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

para ver el anuncio, y busque la directiva mdColor y el servicio $ mdColor en los documentos para ver algunos ejemplos.

Para mí, supongo que todo lo que comienza con md, solo puedes aplicarles los colores del tema.

En la documentación, hay algunos componentes que no están documentados donde puede usar los colores del tema. Ejemplo:

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

Solo pude hacer esto usando Angular Material 1.1.0.

md-colors directiva md-colors similar a cómo harías ng-class :

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

El código anterior coloreará el texto con el color primario. El objeto que pasa a md-colors usa la clave como propiedad css (es decir, ''color'', ''fondo'', etc.) y el valor como el tema y / o paleta y / o tono que desea usar.

Documentos de origen

Los documentos de Angular Material enumeran explícitamente la lista de componentes, que puede diferenciar con el atributo md-theme :

botón md
md-checkbox
md-progress-circular
md-progress-linear
md-radio-button
md-slider
md-switch
md-tabs
md-text-float
md-toolbar

De la documentación de material angular , en Theming / Declarative Syntax.

Entonces creo que la respuesta corta es: no puedes hacerlo.

EDITADO 27/07/2015

El comentario de TitForTat tiene una mejor solución https://github.com/angular/material/issues/1269#issuecomment-121303016

Creé un módulo:

(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''); } }]); })();

y luego anexar

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

en angular-material.js en la línea 13783

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

Entonces, simplemente puedo aplicar c-md-theme-fg y / o c-md-theme-bg al elemento para aplicar los colores del tema. Me gusta esto:

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

Funciona.

ps: perdón por el inglés, ven de Taiwán :)