最新更新[2018]

Question

我正在尝试使用material-ui创建一个简单的导航栏，看起来就像他们在their site上使用的那个。这是我写的试图复制它的代码：

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)

问题是，标签出现非常奇怪，点击选项卡无论如何都没有效果。屏幕截图：

非常感谢任何帮助。

Answer 1

更新＃1 [2016]

至少，the will is there - 并非所有希望都失去了！

原帖

有同样的问题。

原来，这是一个bug (#773)。

但是你很幸运：This PR提供了一个使用CSS的解决方案。它（有点）有效。这是一个截图：

正如您所看到的，它看起来有点难看，所以您可能想继续摆弄CSS以使选项卡显示在正确的位置。

注意：八个月前，the PR got rejected。显然，在'/<username:\w+>/*' => 'user/userdetailsseo' working perfect for http://localhost/2015/mysite/username, 'user/<username:\w+>/*' =>'user/userdetailsseo' it's not working for http://localhost/2015/mysite/user/username i am getting page not found error...中显示Tabs并不是高优先级，因此，hackfix解决方案就是你现在所拥有的一切！

哦使用预发布库的痛苦！

Answer 2

我认为Kabir的答案是一个良好的开端，我也会将<Tabs>包裹在<ToolbarGroup >中，因为AppBar是工具栏的子集。

e.g。

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

请参阅：http://www.material-ui.com/#/components/toolbar

Answer 3

您是否使用过react-tap-event-plugin？根据{{3}}，这是必要的。

Answer 4

除了CSS hack之外，我发现你可以使用HTML Entities作为黑客来分割标签文本。您可以将 添加到标签标签的开头和结尾，然后就可以节省空间。

它使标签字符串变得丑陋但是如果你不那么关心它可以很好地工作，它还允许你添加任意数量的空格。

以下是更新后的代码：

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="&nbsp;Item 1&nbsp;" />
          <Tab label="&nbsp;Item 2&nbsp;" />
          <Tab label="&nbsp;Item 3&nbsp;" />
          <Tab label="&nbsp;Item 4&nbsp;" />
        </Tabs>
      </AppBar>
    )
  }
}

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

截图： Tabs with spaces

Answer 5

您是否阅读过Material-UI documentation？

尝试将您的内容作为iconElementRight道具传递。

即：

render() {
    var myTabs = (
        <Tabs>
            <Tab label="item 1" />
            <Tab label="item 2" />
        </Tabs>
    );
    return <AppBar title="My App" iconElementRight={myTabs} />
}

虽然看起来确实只支持3种样式（正如文档中的3个示例所示）。您可能必须使用样式创作，因为它看起来不是很灵活。

PS好运，因为自从他们切换到内联样式和他们自己的自定义主题后，很难改变东西或集成其他非mui组件（我是如此推迟，因此我创建了一个使用SASS的分支https://www.npmjs.com/package/material-ui-with-sass）

使用material-ui

5 个答案:

最新更新[2018]

更新＃1 [2016]

原帖