読者です 読者をやめる 読者になる 読者になる

Umi Uyuraのブログ

Titaniumを使ったスマートフォンアプリ開発を中心に、プログラミング関連の作業ログ。

Material UIのv0.10.0が出ていたので見てみた

Material UIのv0.10.0が出たようです。

またマイナーバージョンがひとつあがって、Breaking Changesがあるようですが、

  • 消し忘れていたinput.jsxを削除したよ!
  • Button系コンポーネント<input type="submit"> をベースにしていたけど、 <button> ベースにしたよ!

という程度なので、該当するものを使っていたりカスタマイズしていたりしなければ、それほど影響がないような気もします。

そんなわけで、 リリースノート を眺めてみて、個人的に大きかった変更点について書いておきます。

SVGアイコンが同梱されるようになった

Material UIにはSVGアイコン取り扱うためにSvgIconコンポーネントが用意されているものの、アイコンの実体は、以下のように自分で用意する必要がありました。

/** action-home.jsx */
let React = require('react');
let mui = require('mui');
let SvgIcon = mui.SvgIcon;

let ActionHome = React.createClass({
  render: function() {
    return (
      <SvgIcon {...this.props}>
        <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path>
      </SvgIcon>
    );
  }
});

module.exports = ActionHome;

例: Material UI - Material Design React Components

独自のアイコンなどは仕方がないと思うのですが、Googleが公開しているMaterial Design用のアイコンなどは数が多い上に、使用頻度は高くなるので、用意されていても良いんじゃないかな―と思っていたのですが、今回からSVGアイコンについてはビルド済のものが同梱されるようになったようです。

ただ、ファイルサイズを抑えるためだと思いますが、通常の require('material-ui') したインスタンスには読み込まれていません。

以下のように、必要なアイコンをひとつひとつ require で読み込んで使うようです。

var FaceIcon = require('material-ui/lib/svg-icons/action/face')

React.render: function() {
  return (
    ...
    <FaceIcon />
    ...
  );
}

どんなアイコンがあるかは、 GoogleのMaterial Designのサイト を見ると良いでしょう。

読み込むときは material-ui/lib/svg-icons/<カテゴリ>/<アイコン名> のように指定します。

スペースを含む名前はハイフンに置き換わっているようです。( account balanceaccount-balance など)

また 3d rotationthree-d-rotation.js になっていたりするので、詳しくは node_modules/material-ui/lib/svg-icons フォルダ内を漁ってみると、見つかると思います。

これで、自前のアイコンリソースなどが何もないときでも、マテリアルデザインのアイコンが使えるので、ちょっとしたツールなどを作るときには重宝しそうです。

Tableコンポーネントの不具合が修正された

前バージョンのv0.9.2で追加されたTableコンポーネント、ちょうど作っていたツールに欲しかったので使ってみていたのですが、いくつか不具合にぶつかっていました。

umi-uyura.hatenablog.com

v0.10.0では、そのときに見つけていた以下の不具合が修正されていました。

特に、行選択チェックボックスが消せない方は、使い方によっては不要なパーツが表示されてしまう問題だったので、修正されて良かったです。

Material UI、非常に開発が活発なので、まだまだ進化していきそうですね。