Material-UI 使ってみたよ!
こんにちは。
メゾンマークでフロントエンドを担当している、k-taroです。
今回は最近趣味開発で使い始めたMaterial-UIについて導入から実装までを行います。
viewはもちろんReactです!
Material-UIとはGoogleのMaterialデザインを実装できるReact用のviewコンポーネント群です。
今流行りのMaterialデザインをもとに作られており、さくっとviewを作りたい時には十分な量のコンポーネントが用意されています!
それでは使ってみましょう!
導入
まずはcreate-react-appでreactの導入と必要なモジュールをインストールします。
$ create-react-app sample $ cd sample $ npm i material-ui react-tap-event-plugin
これで導入は完了です
react-tap-event-plugin
Material UIの公式サイトにタッチ、タップ、クリックイベントを使うためにreact-tap-event-pluginを使ってくれよ!って書いてあるので、src/index.jsでこれらのイベントを使う準備をします。
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; import injectTapEventPlugin from 'react-tap-event-plugin'; // クリックイベントなどを使えるようにする injectTapEventPlugin(); ReactDOM.render(<App />, document.getElementById('root')); registerServiceWorker();
これで準備はOKです!
完成品
まずは完成ソースと画面キャプチャをご覧ください。
import React, { Component } from 'react'; import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; import AppBar from 'material-ui/AppBar'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; import RaisedButton from 'material-ui/RaisedButton'; class App extends Component { constructor(props) { super(props); this.state = {open: false}; this.handleOpen = this.handleOpen.bind(this); this.handleClose = this.handleClose.bind(this); } handleOpen() { this.setState({open: true}); } handleClose() { this.setState({open: false}); } render() { const actions = [ <FlatButton label="Cancel" primary={true} onTouchTap={this.handleClose} />, <FlatButton label="Submit" primary={true} keyboardFocused={true} onTouchTap={this.handleClose} />, ]; return ( <MuiThemeProvider> <div> <AppBar title="Title" /> <RaisedButton label="Dialog" onTouchTap={this.handleOpen} /> <Dialog title="Dialog With Actions" actions={actions} modal={false} open={this.state.open} onRequestClose={this.handleClose} > The actions in this window were passed in as an array of React objects. </Dialog> </div> </MuiThemeProvider> ); } } export default App;
こちらが画面キャプチャです
Dialogボタンを押すとモーダルが起動します!
これだけの記述でデザインと動きが実装できるのはとてもありがたいです。。。
解説
先ほどのソースを解説します!
import React, { Component } from 'react'; import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; import AppBar from 'material-ui/AppBar'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; import RaisedButton from 'material-ui/RaisedButton';
ここで使用するMaterial-UIのコンポーネントをimportしています。
ポイントはルートコンポーネントをMuiThemeProviderでラップすることで、Material UIのコンポーネントを使えるようにします。
class App extends Component { constructor(props) { super(props); this.state = {open: false}; this.handleOpen = this.handleOpen.bind(this); this.handleClose = this.handleClose.bind(this); } handleOpen() { this.setState({open: true}); } handleClose() { this.setState({open: false}); }
ここでダイアログの開閉フラグと、イベントを定義しています。
render() { const actions = [ <FlatButton label="Cancel" primary={true} onTouchTap={this.handleClose} />, <FlatButton label="Submit" primary={true} keyboardFocused={true} onTouchTap={this.handleClose} />, ]; return ( <MuiThemeProvider> <div> <AppBar title="Title" /> <RaisedButton label="Dialog" onTouchTap={this.handleOpen} /> <Dialog title="Dialog With Actions" actions={actions} modal={false} open={this.state.open} onRequestClose={this.handleClose} > The actions in this window were passed in as an array of React objects. </Dialog> </div> </MuiThemeProvider> ); }
ここで実際にMaterial-UIを使っています。
AppBarはヘッダーのコンポーネントで、titleに値を渡すことでヘッダー内にタイトルのように表示されます。
RaisedButtonコンポーネントをクリックするとstateが代わり、モーダルが開閉します。
Dialogコンポーネント内で、FlatButtonコンポーネントを使い、開閉ボタンを作っています。
また、onRequestCloseでモーダル外をクリックした際にもthis.handleCloseを発火させるようにしています。
公式サイトのComponentに詳しい使い方が乗っているので、興味のある方はみてみてください!
まとめ
簡単ではありましたが、Material-UIの導入から実装を行いました
さくっとviewを作りたい時にはとても便利だと思うので、ぜひつかってみてください!