semantic-uiからmaterial-uiへ

Question

###前提・実現したいこと
semantic-uiで作りたいものの概要をつかみ、react+material-uiで実際に動かそうとしています。
なので下のリンクをmaterial-uiで実装したい。

###発生している問題・エラーメッセージ
semantic-uiのタブをmaterial-uiでも試そうとしたのですができませんでした。
実装したい点

• 設定icon以外を左に寄せたい
• material-uiでのtabをsemantic-uiのsecondary-tabのようにしたい

###該当のソースコード
(https://jsfiddle.net/moririn/wbn2u783/#&togetherjs=aGg78lJIdr)

reactでのコード

 import React from 'react';
import {
  IconButton
}from 'material-ui';
import ActionViewStream     from 'material-ui/svg-icons/action/view-stream';
import ActionViewArray      from 'material-ui/svg-icons/action/view-array';
import ActionDateRang       from 'material-ui/svg-icons/action/date-range';
import ActionSettings       from 'material-ui/svg-icons/action/settings';
import injectTapEventPlugin from "react-tap-event-plugin"
import {Tabs, Tab} from 'material-ui/Tabs';
injectTapEventPlugin();



const Header = ()=> (
      <Tabs>
          <Tab icon={<ActionViewArray />} >
            <div>
              hoge1
            </div>
          </Tab>
          <Tab icon={<ActionViewStream />} >
            <div>hoge2</div>
          </Tab>
          <Tab icon={<ActionDateRang  />} >
            <div>
              hoge3
            </div>
          </Tab>
          <Tab icon={<ActionSettings/>}/>
      </Tabs>
  );

export default Header;

###補足情報(言語/FW/ツール等のバージョンなど)
"material-ui": "0.15.4",
"normalize.css": "3.0.3",
"react": "^0.15.0",
"react-dom": "^0.15.0",
"react-tap-event-plugin": "0.2.2"

Comments

[mit0223]

「material-uiでも試そうとしたのですができませんでした」とありますが、そのできなかったコードをあげていただけますか。また、そのコードの問題点を書いてもらえますでしょうか。このままでは、semantic-ui で書いたものを material-ui に書き直してくださいという「丸投げ」質問になってしまいます。

Answer 1

設定icon以外を左に寄せたい

ヘッダー部分のナビゲーションバーは material-ui では Tabs ではなく、 AppBar を使ったほうがよいのではないでしょうか。

    <AppBar iconElementLeft={
      <div>
        <FlatButton icon={<ActionViewArray />} />
        <FlatButton icon={<ActionViewStream />} />
        <FlatButton icon={<ActionDateRang />} />
        <FlatButton icon={<ActionSettings />} />
      </div>} >
    </AppBar>

ただし、Googleのガイドライン(App bar)によると Action Icon は右寄せだそうです。 material-ui の AppBar は、これに従って、子要素を右寄せで並べるようです。左寄せにするために iconElementLeft を使いました。

material-uiでのtabをsemantic-uiのsecondary-tabのようにしたい

これは、大量にコーディングしないとできないと思います。そもそも、material-ui を使うならグーグルのガイドラインに従って作るべきだと思います。
Googleのガイドライン(Tabs)

Tab のバックグラウンドを白くするだけならテーマで設定して白くすることは可能です。
ベースのテーマをコピペして固有のテーマファイルを作成して、以下を追加することでバックグラウンドを白くできました。

  tabs:{
    backgroundColor: _colors.white,
    selectedTextColor: _colors.pinkA200,
    textColor: _colors.grey500
  }