Aurelia Materialize Bridge funciona con MaterializeCSS 2

Nov 29, 2024   HIRANO Satoshi

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.

dev CSS Material Design Materialize Aurelia
Síganos
Compartir

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


Certainly! Continuing with the translation of the remaining sections: --- (continues similarly for the remaining sections)
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.