Aurelia Materialize BridgeをMaterializeCSS 2で動かす

Nov 29, 2024   HIRANO Satoshi

Aurelia Materialize Bridge (AMB)をMaterializeCSS 2.xで動かす方法を公開します。 Material Design 3の強力なカラー管理システムを使うことができるようになります。

dev CSS Material Design Materialize Aurelia
フォロー
シェア

デモ

まず、リクエストランドのテーマ設定のページを見てください。私はMaterial Design M3で導入された色管理システムとリクエストランドのテーマ管理システムを統合するために数日を費やしました。




また、下記の方法を使ったダークモードの記事テーマの記事を書きました。





なぜMaterializeCSS 2にアップグレードするのか?

一時期放棄されていたMaterializeCSS は新しい開発者に移行していて、最新の Material Design 3 (M3) ガイドラインを取り入れるように進化してつつあります。MaterializeCSS 2.1 以降では、丸みのあるボタンやトーン ボタンなど、M3 に沿った機能が導入されています。

MaterializeCSS 2.x の際立った機能の 1 つは、Google の Material Color Utilities (MCU) を利用した改良されたカラー管理システムです。MCUは、ライトモードとダークモードの両方で、単一のシードカラーから幅広い色を生成します。MaterializeCSS は、これらの色を --md-sys-color-primary や --md-sys-color-background などの CSS 変数として <html> ルート要素に適用します。

Aurelia Materialize Bridge (AMB) は、愛用しているJavaScriptフレームワークAureliaと MaterializeCSS 間の便利なコネクタです。ただ、AMB は MaterializeCSS 1対応のままで、数年間更新されていません。

以下では、AMB を MaterializeCSS 2.x と互換性を持たせるための回避策を紹介します。回避策の一部は AMB 用であり、その他は MaterializeCSS 2.x 自体のためのものです。


AMBをMaterializeCSS 2.xで動かす手順

新しいスタイルを眺める

node_modules/@materializecss/materialize/dist/css/materialize.cssを眺めて、新しいデフォルト色を見ます。今後、MaterializeCSS 2で導入された色と自分の色がコンフリクトしたら、このファイルを見てください。


main.tsにグローバル変数を追加

移行を容易にするために、main.tsに以下を追加します。


import * as Materializecss from '@materializecss/materialize';
import * as AMB from 'aurelia-materialize-bridge';

global.M = Materializecss; // Export MaterializeCSS
window['Waves'] = Materializecss.Waves;
Materializecss.Waves['attach'] = () => {};
global.M.textareaAutoResize = Materializecss.Forms.textareaAutoResize;
global.M.updateTextFields = () => {};


Toast

M.toast() を'new M.Toast()'に置き換えます。これはこのissueの回避策です。


md-buttonへの追加

md-button="flat: false;"にはクラスに .filled, .outlined, または .tonalを追加します。

md-button="flat: true;"にはクラスに.text.を追加します。


色が変わっても良いのであれば、これはやらなくて構いません。


<button md-button="flat: false" class="filled">Hi</button>
<button md-button="flat: true" class="text">Hi</button>
<a md-button="flat: false" class="filled">Hi</a>
<a md-button="flat: true" class="text">Hi</a>


md-selectの<label>を修正

MaterializeCSS 2.xは<label> をDOMに追加します。 AMBがDOMに追加する<label class="md-select-label">とコンフリクトするのでCSSに以下を追加します。


.input-field .md-select-label {
    top: 0px;
    transform: scale(0.75);
}


<md-input> と<input>のラベルの持ち上げを修正

MaterializeCSS 2.xではplaceholder=" " (not "")がないとラベルを持ち上げてくれません。 追加します。


md-char-counterの修正

md-char-counterはmaxlengthが必要です。


<md-input label="Name" 
          placeholder=" "
          maxlength.bind="100" 
          md-char-counter="100">
</md-input>


ulについてしまう頭の点を消す


  ul:not(.browser-default) {
      list-style-type: none;
  }


.collapsible-bodyにdivを追加

.collapsible-bodyがCSS animationを使うようになった関係で内容をdivで包む必要があります。

<div class="collapsible-body">
   <div>
     text
   </div>
</div>


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

新しいカラー管理システムを使う

<md-colors>を削除します。

終わりに

AMBも機能が少ないながら独自のテーマ機能を持っていますが、これで、MaterializeCSSの完全なテーマ機能とダークモードを利用することができるようになります。ダークモードについては以前の記事を見てください。


このような調整で、Aurelia Materialize Bridge (AMB)をMaterializeCSS 2.xと使うことができるようになり、より洗練されたMaterial Design 3のデザインが使えるようになります。



新着