Material-UIでGridレイアウトを試す

Material-UIにはグリッドレイアウトが無い？

Material-UIは2017年5月の現時点(v0.18)ではグリッドレイアウトの機能を提供していません。これは、Material-UIが純粋なコンポーネントライブラリを指向しているためのようです。
ですが、やっぱりそれにはこだわらずに便利なグリッドレイアウトを提供する方針になったようで、アルファブランチでは実装されています。
アルファ版の公式ページではレイアウトのセクションにGridについて記載されています。

後方互換なし

Material-UIを使っている既存のReactアプリにグリッドレイアウトを適用するため、Materi-UIアルファ版をインストールしてみます。

$ # インストール済みのパッケージを削除
$ npm uninstall -S material-ui
$ # α版をインストール
$ npm install -S material-ui@next

私の既存のプロジェクトではTypeScriptとWebpackを使っているのでビルドします。すると色々エラーがでます。どうやらそのままでは使えないようです。FlatButtonが見つからない、とかTabに必要なプロパティがないとかいわれました。

$ webpack
83:44-54 "export 'FlatButton' was not found in 'material-ui'
...

動かすためにやったこと

公式ページの例をみながらエラーに基づいて書き方が変わっているところを修正していきます。もとのアプリが簡単なものだったため、FlatButtonとTabを修正するだけでした。FlatButtonはButtonという名前に変わっていたり、TabではonChange属性が必須になっていたりしてました。

が、改めてビルドするとまた怒られてしまいます。

$ webpack
 Module ''material-ui/Button'' has no exported member 'Button'

TypeScriptの型定義(@types/ui-material)が古いままなので、もちろんButtonなんてありません。npm install @types/material-ui@nextとかしても型はないようです。探しても見つからないので仕方ないので型は利用しないことにします。

npm uninstall --save-dev @types/material-ui

これで無事にビルドが通るようになりました。

Gridレイアウト

BootstrapのGridレイアウトと同じ感覚でつかえます。<Grid container>を配置するとコンテナが縦に積み上がります。その中を列に区切るために複数の<Grid item>を配置していきます。

幅指定

<Grid item>の幅は相対指定で1〜12で指定します(12で幅100%)。例えばこんなかんじで指定します。

<Grid container>
    <Grid item xs={3}></Grid>
    <Grid item xs={6}></Grid>
    <Grid item xs={3}></Grid>
</Grid>

 ┌───┐┌──────┐┌───┐
 │ 3 ││  6   ││ 3 │
 └───┘└──────┘└───┘

レスポンシブ

<Grid item>の幅は画面サイズに応じてレスポンシブに変えることができます。上記のxs属性に加えて、画面サイズに応じた属性(sm, md, lg, xl)で幅を指定します。Bootstrapのブレイクポイントとは値が異なるので要注意です。各ブレイクポイントの値は以下になります。

• xs, 全て
• sm, small: 600dp〜
• md, medium: 960dp〜
• lg, large: 1280dp〜
• xl, xlarge: 1920dp〜

<Grid>
    <Grid item xs={1} md={3} lg={6}></Grid>
</Grid>

センタリングとか

横方向の中央寄せなどは<Grid container>にjustify属性にて指定します。指定可能な属性の値は以下の通りです。

• flex-start: 左寄せ
• center: 中央寄せ
• flex-end: 右寄せ
• space-between: 整列（左端と右端にスペースなし）
• space-around: 整列（左端と右端にスペースあり）

縦方向については<Grid container>にtext-align属性で指定します。指定可能な値は以下の通りです。

• flex-start: 左寄せ
• center: 中央寄せ
• flex-end: 右寄せ
• stretch: ??

できあがり

こんな感じになりました。レイアウトも使えるようになったので、とりあえずのデザインはMaterial-UIひとつで間に合いそうです。

＊追記：GithubにMaterial-UIでGridレイアウトを試したサンプルコードをアップしました。