Aurelia Materialize BridgeをMaterializeCSS 2で動かす
Aurelia Materialize Bridge (AMB)をMaterializeCSS 2.xで動かす方法を公開します。 Material Design 3の強力なカラー管理システムを使うことができるようになります。
デモ
まず、リクエストランドのテーマ設定のページを見てください。私は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を追加
<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のデザインが使えるようになります。
