30

彼らが自分のサイトで使用しているように見えるMaterial-UIでシンプルなナビゲーションバーを作成しようとしています。これは私がそれを複製しようとして書いたコードです:

import React from 'react'
import {AppBar, Tabs, Tab} from 'material-ui'

class Nav extends React.Component {
  render() {
    return (
      <AppBar title="My App">
        <Tabs>
          <Tab label="Item 1" />
          <Tab label="Item 2" />
          <Tab label="Item 3" />
          <Tab label="Item 4" />
        </Tabs>
      </AppBar>
    )
  }
}

React.render(<Nav />, document.body)

問題は、タブが非常に奇妙に表示され、タブをクリックしてもまったく効果がないことです。スクリーンショット:

ここに画像の説明を入力

4

7 に答える 7

2

Kabir の答えは良いスタートだと思います。ツールバーのサブセットであるため<Tabs>、 を a でラップすることもできます。<ToolbarGroup >AppBar

例えば

iconElementRight={<ToolbarGroup >{myTabs}</ToolbarGroup>}

参照: http://www.material-ui.com/#/components/toolbar

于 2016-09-11T22:37:14.403 に答える
0

react-tap-event-plugin を使用しましたか? https://github.com/callemall/material-ui/issues/288によると、必要です。

于 2016-07-08T14:03:33.803 に答える