【React】Material-UIでReactアプリケーションをマテリアルデザイン化する
Material-UI
Material-UIはマテリアルデザインをReactアプリケーションに導入することができるUIコンポーネントです。Material-UIを使うことで、手軽にGoogleのマテリアルデザインを踏襲したアプリケーションを作ることができます。
Install
例によってnpm
でインストールします。
$ npm install @material-ui/core
# 他のUIコンポーネントも一括でインストールしたい場合
$ npm install @material-ui/core
ついでにReact
のアプリも作ってしまいます。
create-react-appのインストールについてはこちら。
$ create-react-app material-react-app
$ cd material-react-app
Usage
とりあえずAppBar
とCard
、Button
を使ったレイアウトを簡単に作ってみました。
既存のApp.js
を編集します。
src/App.js
import React, { Component } from 'react'; import { withStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; import Typography from '@material-ui/core/Typography'; import Card from '@material-ui/core/Card'; import CardActions from '@material-ui/core/CardActions'; import CardContent from '@material-ui/core/CardContent'; const styles = { card: { margin: 48, height: 128 }, }; class App extends Component { render() { const classes = this.props.classes; console.log(classes); return ( <div> <AppBar position="static" color="default"> <Toolbar> <Typography variant="title" color="inherit"> AppBar </Typography> </Toolbar> </AppBar> <Card className={classes.card}> <CardContent> Hello, Material-UI in React :) </CardContent> <CardActions> <Button >Cancel</Button> <Button variant="raised" color="primary">OK</Button> </CardActions> </Card> </div> ); } } export default withStyles(styles)(App);
軽く説明
import
import { withStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; import Typography from '@material-ui/core/Typography'; import Card from '@material-ui/core/Card'; import CardActions from '@material-ui/core/CardActions'; import CardContent from '@material-ui/core/CardContent';
使用するUIコンポーネントは片っ端からimportします。
withStyles
はCSSによる要素のスタイリングに使います。
AppBar
<AppBar position="static" color="default"> <Toolbar> <Typography variant="title" color="inherit"> AppBar </Typography> </Toolbar> </AppBar>
AppBar
(一番上のバー)です。タイトルを表示したり、トップメニューを入れたりできます。基本ToolBar
を入れ子にして、その中に文字列やアイコンを配置していくようです。
Card&Button
<Card className={classes.card}> <CardContent> Hello, Material-UI in React :) </CardContent> <CardActions> <Button >Cancel</Button> <Button variant="raised" color="primary">OK</Button> </CardActions> </Card>
コンテンツの一単位としてよく使われるカード。
CardContent
でカードコンテンツの領域を、CardActions
でボタンなどアクションを要するコンポーネントの領域を確保します。
<Button >Cancel</Button> <Button variant="raised" color="primary">OK</Button>
Button
の配置はこれだけでOK。オプションによって様々な種類
のボタンを選べます。
FloatingActionButton
FloatingActionButtonもちゃんと用意してあるみたいです。
中のアイコンは別途インストールします。
$ npm install @material-ui/icons
import React, { Component } from 'react'; import Button from '@material-ui/core/Button'; import AddIcon from '@material-ui/icons/Add'; import Icon from '@material-ui/core/Icon'; import DeleteIcon from '@material-ui/icons/Delete'; class App extends Component { render() { return ( <div> <div> <Button variant="fab" color="primary" aria-label="add"> <AddIcon /> </Button> <Button variant="fab" disabled aria-label="delete"> <DeleteIcon /> </Button> </div> </div> ); } } export default App;
ほかにも様々なUIコンポーネントが用意されているので、色々試してみたいと思います。