Material-UI

Material-UIの紹介.

  1. Material Design
  2. Material-UI
  3. See Also

Material Design

Material DesignはGoogleが開発しているDesign Guidelineで一貫性と実世界と同じ挙動でユーザーの負担を軽くすることが目標で、 マテリアル(素材)のある世界 が特徴.

あらゆるdeviceを対象とした一貫性周りの世界と連続的で、同じ物理的性質や同じ動きで、ユーザーがあらゆるdeviceであらゆるApplicationを、それぞれでの操作を学習する必要無く、自然に使えるようになる.

Material-UI

About

Material-UIはMaterial DesignのReact.js実装.

ComponentとThemeで簡単にMaterial Designを試すことができる.
(Themeについては今回は触れず、Theme of Material-uiで紹介.)

Install

npm install --save material-ui

material-ui をinstallする.

React-Tap-Event-Pluginを使用して、Tap eventをlistenしているので、これを有効にしないと一部のComponentが正常に動作しない.

npm install --save react-tap-event-plugin

でinstallし、

import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

をApplicationで実行して有効化する.

また、Material-UIは Roboto フォントを使用しているので、

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

をHTMLに差し込むなどして、 Roboto フォントを有効にする.

Example

import { render } from 'react-dom';
import React, { Component, PropTypes } from 'react';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

import {
  Avatar, Card, CardActions,
  CardHeader, CardMedia, CardTitle,
  RaisedButton, FlatButton, CardText
} from 'material-ui';

class App extends Component {
  render() {
    return (
      <Card>
        <CardHeader
          title="Title"
          subtitle="Subtitle"
          avatar={<Avatar style={{color: 'red'}}>A</Avatar>}/>
        <CardHeader
          title="Demo Url Based Avatar"
          subtitle="Subtitle"
          avatar="http://lorempixel.com/100/100/nature/"/>
        <CardMedia overlay={<CardTitle title="Title" subtitle="Subtitle"/>}>
          <img src="http://lorempixel.com/600/337/nature/"/>
        </CardMedia>
        <CardTitle title="Title" subtitle="Subtitle"/>
        <CardActions>
          <RaisedButton primary={true} label="Action1"/>
          <FlatButton label="Action2"/>
        </CardActions>
        <CardText>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
          Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
          Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
        </CardText>
      </Card>
    );
  }
}

render(<App />, document.getElementById('app'));
/20160104/example.png

こんな感じにComponentに props を渡すだけ.

See Also