Material UIとは
GoogleのマテリアルデザインをReactベースで使えちゃう今時なCSSライブラリ
おっ、これかっちょいいと思って少し触ってみました。
日本語の解説記事とかが見当たらなかったので簡単に紹介します。
Get started
この辺で解説されているので、公式のドキュメントとともに参考にする感じで。
Componentの使い方とか
大別して3種類のAPIがあります。
- Props
- Events
- Methods
名前の通りそれぞれ、
- reactコンポーネントのrenderで要素を生成する際に利用できるprop
- 要素で発生するhtmlイベント（onChange,onClickなど）
- 要素で使える関数
になります。
使い方を見ていきます。
Props
これはそのまんま。
render() {
return (
<DatePicker
hintText="Landscape Dialog"
mode="landscape"
autoOk={true}
defaultDate={new Date()}
formatDate={(dt) => `${dt.getFullYear()}/${dt.getMonth() + 1}/${dt.getDate()}`} />
);
注：ES6構文使ってます
公式のドキュメントで、propの名前と型が載っているので、その通りに記載していきます。
関数なんかも使ったりします。
Events
イベントハンドルする関数を定義して、それをプロパティに入れます。
let hogeDropDownMenu = React.createClass({
_handleOnChange(e, index, item) {
alert(item.text);
},
render() {
let items = [{payload: 1, text: 'item1'}, {payload: 2, text: 'item2'}]
return (
<DropDownMenu onChange={this._handleOnChange} menuItems={items} />
);
}
});
この例ならドロップダウンの選択が切り替わった時にアラートが動きますね。
Methods
Componentのrefを取得して利用できる関数です。
let fugaTimePicker = React.createClass({
//略
getTime() {
return this.refs.TimePicker.getTime();
},
render() {
return (
<TimePicker ref="TimePicker" />
);
}
});
同コンポーネント内で利用するならこんな感じでthis.refs.TimePickerみたいに使えます。
親コンポーネントで使うならんな感じで関数をリレーしてやるといいんでしょうか。
CSSの使い方とか
ここに書いてあるのが全てなので特に解説することがないです。
インラインでスタイルを上書きできるようだけど、イマイチ挙動が怪しかったですね。
DatePickerでwidth指定しても、大枠のdiv要素だけ指定されてて実際の見た目として出てくる日時の部分が元のままの幅だったり。
所感
一生ラッパを書かされるのでちょっとめんどくさい感じでした。
APIが足りてなくてそれを補う必要があるってのも含めて。（text fieldsとかにはgetValue()みたいなのがあるのに、それがない要素(主にDropDownMenu)はevent拾って値を持たせて・・・とかしなきゃいけなくて、うーん・・・）
他のところは大体見たまんま使わせてくれるし、ナウなヤングっぽいUIをReactと親和性高くかけるので、そこが良いと思うなら頑張って使う感じでしょうか。
と言っても自分自身Reactを使って何か書いた経験が少ないので、これがReactでの一般的なことなのだって話（もしくはそんなことしなくても楽に書けるとか）だったらごめんなさいしなくちゃですが。
ということでMaterial UIの紹介でした。