expand.js は Web アプリ開発を補助するためのライブラリです。 JavaScript のユーティリティライブラリやカスタム要素などが含まれています。

その中からマテリアルデザインな要素を定義した mat-elements を使って簡単にアプリの画面を作ってみます。

インストール

expand.js のモジュールは bower でインストールできます。

$ bower install --save ExpandJS/mat-elements

依存するライブラリも大量にインストールされるはずです。

ライブラリを読み込む

mat-elements は HTML Imports を使って読み込めます。対応していないブラウザで動かす場合は polyfill が必要です。

<link rel="import" href="bower_components/mat-elements/mat-elements.html">

依存関係も自動で読み込んでくれるので楽ちんです。

Hello, World!

簡単なボタンを作ってみます。ボタンは <mat-button> 要素として定義されています。

<mat-button label="Hello, World!" />

button 要素と少し使い方が違います。

アプリっぽい画面を作る

よくあるスマホアプリっぽい画面を作るには <mat-header-panel> 要素を使います。

<mat-header-panel background="white">
    <mat-header background="green">
        <div>Header</div>
    </mat-header>
    <mat-content>
        Amet cumque quos repudiandae eius harum! Debitis debitis voluptatibus repellendus modi pariatur id. Exercitationem ducimus non totam perferendis officia odio. Atque ratione aliquid earum ab odit impedit itaque? Blanditiis adipisci!
    </mat-content>
</mat-header-panel>

これだけでマテリアルデザインらしい画面が作れます。

メニューをつけるにはこんなかんじです。

<mat-header-panel background="white">
    <mat-header background="green" mode="fixed">
        <div style="flex: 1">Header</div>
        <mat-menu-button target="test-menu"></mat-menu-button>
    </mat-header>
    <mat-content>
        Amet cumque quos repudiandae eius harum! Debitis debitis voluptatibus repellendus modi pariatur id. Exercitationem ducimus non totam perferendis officia odio. Atque ratione aliquid earum ab odit impedit itaque? Blanditiis adipisci!
    </mat-content>
    <mat-menu id="test-menu">
        <mat-option label="Option"></mat-option>
        <mat-option label="Option"></mat-option>
        <mat-option label="Option"></mat-option>
    </mat-menu>
</mat-header-panel>

<mat-menu-button> と <mat-menu> を付け足して、それらしいものが簡単にできました。

まとめ

• expand.js は Web アプリを補助するライブラリ
• mat-elements はその中でマテリアルデザインな要素を定義している
• <mat-*> 要素で簡単にアプリ画面を"らしく"作ることができる