使用material-ui创建导航栏

Question

我正在尝试使用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)

问题是，标签出现非常奇怪，单击选项卡没有任何效果。 截图：

任何帮助将非常感谢。

Answer 1

最新消息[2018]

问题应该在最新版本中修复。

更新＃1 [2016]

至少， 意志在那里 - 并非所有的希望都失去了！

原帖

有同样的问题。

事实证明，这是一个错误（＃773） 。

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

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

注意：八个月前， PR被拒绝了 。 显然，在AppBar显示Tabs并不是高优先级的，所以，hackfix解决方案就是你现在所拥有的！

哦，使用预发布库的痛苦！

Answer 2

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

例如

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

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

Answer 3

派对有点晚了，但这个解决方案对我有用。 仅供参考，这是一个带有Rails后端的React / Redux应用程序。

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Link } from 'react-router'
import AppBar from 'material-ui/AppBar'
import Drawer from 'material-ui/Drawer'
import MenuItem from 'material-ui/MenuItem'
import { getBasename } from '../config/environment'

export default class Navbar extends Component {
  constructor(props) {
    super(props)
    this.state = {open: false}
    this.displayNavbar = this.displayNavbar.bind(this)
  }

  toggleDrawer = () => this.setState({ open: !this.state.open })

  authenticatedNavbar = () => {
    return (
      <div>
        <AppBar
          iconElementRight={
            <MenuItem
              containerElement={<Link to={getBasename() + 'login'} />}
              onTouchTap={() => {this.props.onLogoutClick()}}
              primaryText="Logout"
            />
          }
          onLeftIconButtonTouchTap={() => this.toggleDrawer()}
          title="Your_app"
        />
        <Drawer
          docked={false}
          onRequestChange={(open) => this.setState({open})}
          open={this.state.open}
        >
          <MenuItem
            containerElement={<Link to={getBasename() + 'home'} />}
            onTouchTap={() => { this.toggleDrawer() }}
            primaryText="Home"
          />
          <MenuItem
            containerElement={<Link to={getBasename() + 'some_component'} />}
            onTouchTap={() => { this.toggleDrawer() }}
            primaryText="Some Component"
          />
        </Drawer>
      </div>
    )
  }

  unauthenticatedNavbar = () => {
    return (
      <div>
        <AppBar
          iconElementRight={
            <MenuItem
              containerElement={<Link to={getBasename() + 'login'} />}
              primaryText="Login"
            />
          }
          showMenuIconButton={false}
          title="Your_app"
        />
      </div>
    )
  }

然后根据用户的身份验证状态显示相应的AppBar。

我真的不认为标签是App Bar的一部分。 “材质”规范将它们显示为辅助工具栏。

Answer 4

你有没有使用react-tap-event-plugin？ 根据https://github.com/callemall/material-ui/issues/288，它是必需的。

Answer 5

除了CSS hack之外，我发现你可以使用HTML实体作为黑客来分割标签文本。 你可以添加  到标签标签的开头和结尾，你就有了自己的空间。

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

这是更新的代码：

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)

截图： 带空格的标签

Answer 6

您是否阅读过Material-UI 文档 ？

尝试将您的内容作为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 ）