Saltar al contenido

¿Cómo cambiar el color de subrayado de la pestaña seleccionada en material angular?

Solución:

La forma más sencilla es cambiar mediante CSS:

md-tabs.md-default-theme md-ink-bar, md-tabs md-ink-bar {
    color: red !important;
    background-color:red !important;
}

Pero también puede consultar el § sobre la temática en la documentación: https://material.angularjs.org/latest/Theming/01_introduction

En algún momento, el CSS se incrusta y se genera sobre la marcha en etiquetas de estilo, si este código no funciona, intente forzar el color con !important.

md-tabs md-ink-bar {
    color: green;
    background-color: green;
}

Debe definir un tema personalizado y establecer el color de acento en el que desea que tenga su barra de tinta md. En este ejemplo es blanco:

var customAccent = {
    '50': '#b3b3b3',
    '100': '#bfbfbf',
    '200': '#cccccc',
    '300': '#d9d9d9',
    '400': '#e6e6e6',
    '500': '#f2f2f2',
    '600': '#ffffff',
    '700': '#ffffff',
    '800': '#ffffff',
    '900': '#ffffff',
    'A100': '#ffffff',
    'A200': '#fff',
    'A400': '#f2f2f2',
    'A700': '#ffffff'
};
$mdThemingProvider
.definePalette('whiteAccent', customAccent);

$mdThemingProvider.theme('whiteAccentTheme')
    .primaryPalette('deep-purple')
    .accentPalette('whiteAccent');

Puede generar una paleta de acento en este sitio: https://angular-md-color.com/#/

En su vista, use el nuevo tema personalizado para sus pestañas md:

<div md-theme="whiteAccentTheme">
  <md-tabs class="md-primary">...</md-tabs>
</div>
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *