【保存版】 （まとめ） バックガード V666 【×5セット】 【楽天ランキング1位】
前回 はビルドプロセスで sass(scss)を扱えるようにしました。今回は material design components の導入方法について説明します。
【保存版】 （まとめ） バックガード V666 【×5セット】 【楽天ランキング1位】
material design components とは、マテリアルデザインに沿ったデザインを実現するのに役立つライブラリです。マテリアルデザインでは「ここは高さ 48dp にしましょう」といったガイドラインが提示されていますが、その実装は各プラットフォームで「がんばる」という状況でした。この「がんばる」部分を助けてくれるのがこの material design components です。各プラットフォーム向けのライブラリが用意されており、もちろん web 用もあります。web 用のライブラリは mdc web と呼びます。
mdc をアプリに追加する
公式ドキュメントはこちらにあります。mdc web ではコンポーネント毎に npm パッケージが用意されています。全部まとめて追加する場合は、次のように material-components-web を追加します。
$ npm install material-components-web
(中略)
+ [email protected]
added 47 packages from 1 contributor and audited 1789050 packages in 18.25s
必要なものだけをインストールする場合は、次のように
@material/コンポーネント名 を追加します。どの npm
パッケージを追加すればよいかは各コンポーネントの解説ページに書かれています。
$ npm install @material/button
(中略)
+ @material/[email protected]
added 13 packages and audited 1787946 packages in 9.839sコンポーネントの使い方
早速ライブラリを使ってみましょう。各コンポーネントの解説ページは次のような構成になっています。
- どの npm パッケージを追加すればよいか（全部まとめていれた場合は不要）
- どの html を書けばいいか
- scss で何を import すればよいか
- どの javascript コードを実行すればよいか
スタイル部分は scss の import で導入することになっています。前回の記事で scss を扱えるようにしたのはこのためです。
toppage のボタンを mdc のボタンにしてみる
練習として、第7回で toppage に追加したボタンを mdc のボタンにしてみましょう。ボタンの説明はこちら にあります。
ボタンを導入するには、
@material/button パッケージを追加します。
$ npm install @material/button
次に、html structure にしたがってボタン部分を置き換えます。toppage
のテンプレートは index.html に書いていました。
<script id="toptemplate" type="text/plain">
<h1>top page</h1>
<button class="mdc-button" on-click="tosecond">
<span class="mdc-button__label">次の画面へ</span>
</button>
</script>
scss で何を import すればよいかは、説明ページの styles
に書かれています。mystyle.scss に追加しましょう。
@import "@material/button/mdc-button";
body {
background-color: antiquewhite;
}ここまででも見た目はマテリアルデザインになるのですが、ボタンをタップしたときのリップルエフェクトがまだ実現できていません。これは javascript(typescript)側で追加します。ここまで作ってきた web アプリは表示を ractive.js に任せているので、toppage が表示された後に実行されるようにします。
import ractive from "ractive";
import page from "page";
import { mdcripple } from "@material/ripple" ;
export class toppage implements ipage {
private ractive!: ractive;
oncreate(): void {
this.ractive = new ractive({
el: "#container",
template: "#toptemplate",
on: {
// 表示されたあとに実行される
complete: () => {
const buttonripple = new mdcripple(
document.queryselector(".mdc-button")!
);
},
tosecond: () => {
// /second に遷移する
page("/second");
},
},
});
}
}実際に確認してみましょう。今回は何も指定をしていないので、フラットなボタンとして表示されました。
まとめ
mdc web をアプリに追加する方法を説明しました。前回までの準備ができていれば、導入自体はそこまで難しくはないでしょう。