materialui
Pocket

先日のReact.kyotoのLTでMaterial UIの話をしてきました。

ブログでも書いておこうと思います。

Material UI

インストール

まだ正式版ではないので@nextをつけます。

npm install material-ui@next

準備とテーマカラー

以下のように書きました。primaryカラーなどの設定もできます。

import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import createPalette from 'material-ui/styles/palette';
import blue from 'material-ui/colors/blue';
import pink from 'material-ui/colors/pink';
import red from 'material-ui/colors/red';

const theme = createMuiTheme({
  palette: createPalette({
    primary: blue,
    accent: pink,
    error: red,
  }),
});

ReactDOM.render(
  <MuiThemeProvider theme={theme}>
    <App />
  </MuiThemeProvider>,
  document.getElementById('root')
);

例)ボタン

ボタンはこんな感じで書きます。

import Button from 'material-ui/Button';

<Button color="primary">Primary</Button>
<Button raised className={classes.button}>Default</Button>

Buttonを読み込んで、raisedとかをつけるとボタンの種類が変わります。あと開始タグ閉じタグになりました。

以前はこんな感じ。ボタンの種類ごとにインポートして、テキストはlabel属性でつけていました。ボタン以外もこんな感じです。

import FlatButton from 'material-ui/FlatButton'

<FlatButton label="Primary" primary />

個人的にはbuttonだけ呼び出してあとは属性で変えられるのと、開始タグと閉じタグで囲うようになったのは分かりやすくていいなと思いました。

Layout

Layoutが追加されてます。

Layout

こんな感じで書きます。

import Grid from 'material-ui/Grid';

const Example = () => {
  <Grid container gutter={24} direction="column" justify="space-around" align="flex-end">
    <Grid item xs={12} sm={6}>xs=12 sm=6</Grid>
    <Grid item xs={12} sm={6}>xs=12 sm=6</Grid>
  </Grid>
}

大枠はcontainerで、中の要素はitemを指定します。gutterで間隔。

Gridシステムはflexboxを使っているので、directionやjustifyなどflexboxを使ったことがある人なら聞いたことがある属性で、並べ方や方向などを設定できます。

レイアウト追加されたのは便利ですね!!

正式リリースされるのが楽しみです。

あと、Firebaseでホスティングされてるのが何でだろう。

Pocket

カテゴリー: タグ: