Aurelia Materialize Bridge funciona con MaterializeCSS 2
Estas soluciones alternativas te permiten usar Aurelia Materialize Bridge (AMB) con MaterializeCSS 2.x, aprovechando su nuevo sistema de colores derivado de Material Design M3.
Demostración
Puedes visitar la página de temas de Requestland. Pasé varios días integrando nuestro sistema de temas con el nuevo sistema de colores introducido en Material Design M3.
También escribí un artículo sobre el modo oscuro y otro sobre temas, incorporando las soluciones descritas a continuación.
¿Por qué actualizar a MaterializeCSS 2?
MaterializeCSS ha pasado a manos de nuevos desarrolladores y está evolucionando para incorporar las últimas directrices de Material Design 3 (M3). MaterializeCSS 2.1 y versiones posteriores introducen características alineadas con M3, como botones redondeados y tonales.
Una de las características destacadas de MaterializeCSS 2.x es su renovado sistema de colores, impulsado por las Material Color Utilities (MCU) de Google. MCU genera una amplia gama de colores a partir de un solo color base, tanto para modos claros como oscuros. MaterializeCSS aplica estos colores como variables CSS, como --md-sys-color-primary y --md-sys-color-background, al elemento raíz <html>.
Aurelia Materialize Bridge (AMB) actúa como un conector eficiente entre el framework Aurelia y MaterializeCSS. Sin embargo, AMB sigue en el nivel de MaterializeCSS 1 y no ha sido actualizado durante varios años.
En este artículo, compartiré las soluciones que desarrollé tras semanas de trabajo para hacer compatible AMB con MaterializeCSS 2.x. Algunas soluciones son para AMB y otras para MaterializeCSS 2.x en sí mismo.
Soluciones para usar AMB con MaterializeCSS 2.x
Revisar nuevos estilos
Examina el archivo node_modules/@materializecss/materialize/dist/css/materialize.css para revisar los nuevos colores predeterminados. Si encuentras conflictos con las clases CSS cambiadas en MaterializeCSS 2, investiga este archivo.
Añadir referencias globales en main.ts
Para garantizar la compatibilidad, incluye el siguiente código en tu main.ts:
import * as Materializecss from '@materializecss/materialize'; import * as AMB from 'aurelia-materialize-bridge'; global.M = Materializecss; // Exportar MaterializeCSS
window['Waves'] = Materializecss.Waves;
Materializecss.Waves['attach'] = () => {};
global.M.textareaAutoResize = Materializecss.Forms.textareaAutoResize;
global.M.updateTextFields = () => {};
Toast
Reemplaza M.toast() por 'new M.Toast()'. Esta es una solución para este problema.
Actualizar atributos de md-button
Para md-button="flat: false;", incluye .filled, .outlined o .tonal.
Para md-button="flat: true;", usa .text.
Si no te importa que los colores cambien, estas modificaciones no son necesarias.
<button md-button="flat: false" class="filled">Hola</button>
<button md-button="flat: true" class="text">Hola</button>
<a md-button="flat: false" class="filled">Hola</a>
<a md-button="flat: true" class="text">Hola</a>
Corregir <label> en md-select
MaterializeCSS 2.x introduce su propio estilo de <label>, que entra en conflicto con <label class="md-select-label"> añadido por AMB. Añade el siguiente ajuste:
.input-field .md-select-label {
top: 0px;
transform: scale(0.75);
}
Corregir etiquetas <label> en md-select
MaterializeCSS 2.x introduce su propio estilo para las etiquetas <label>, lo que entra en conflicto con <label class="md-select-label"> añadido por AMB. Añade el siguiente ajuste:
.input-field .md-select-label {
top: 0px;
transform: scale(0.75);
}
Gestionar la elevación de etiquetas para <md-input> y <input>
MaterializeCSS 2.x requiere un atributo placeholder=" " (no ""). Asegúrate de incluir este atributo placeholder para que las etiquetas se eleven correctamente.
Habilitar la funcionalidad md-char-counter
El contador md-char-counter requiere un atributo maxlength para funcionar. Aquí tienes un ejemplo:
<md-input label="Nombre" placeholder=" "
maxlength.bind="100"
md-char-counter="100">
</md-input>
Eliminar viñetas de ul
ul:not(.browser-default) {
list-style-type: none;
}
Añadir div a .collapsible-body
.collapsible-body utiliza animaciones en CSS y requiere un div interno para funcionar correctamente.
<div class="collapsible-body">
<div>
texto
</div>
</div>
Corregir el control deslizante (slider)
input[type=range]::-webkit-slider-runnable-track {
background-color: var(--md-sys-color-primary);
}
input[type=range]::-moz-range-track {
background-color: var(--md-sys-color-primary);
}Usar el nuevo sistema de colores
Simplemente elimina <md-colors>.
Conclusión
AMB tiene una funcionalidad de temas limitada. Ahora puedes usar un sistema de temas completo y un modo oscuro con MaterializeCSS. Puedes ver cómo implementar el modo oscuro en mi artículo anterior.
Con estos ajustes, puedes usar con éxito Aurelia Materialize Bridge junto con MaterializeCSS 2.x, aprovechando las potentes características de Material Design 3.
