使用 Material-UI 创建导航栏

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

最新更新 [2018]

Problem should be fixed in latest version.

更新 #1 [2016]

至少，the will is there - 并不是所有的希望都破灭了！

原帖

有同样的问题。

原来是bug (#773)。

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

如您所见，它看起来有点难看，因此您可能需要继续摆弄 CSS 以使选项卡出现在正确的位置。

注意：八个月前，the PR got rejected。显然，在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。

我真的不认为选项卡是应用栏的一部分。 Material 规范将它们显示为辅助工具栏。

Answer 4

你用过 react-tap-event-plugin 吗？根据https://github.com/callemall/material-ui/issues/288 需要。

Answer 5

除了 CSS hack，我发现您可以使用 HTML Entities 作为 hack 来拆分标签文本。您可以将  添加到选项卡标签的开头和结尾，然后您就有了空间。

它使标签字符串变得丑陋，但如果您不太在意，它的工作效果很好，而且它还允许您添加任意数量的空格。

这是更新后的代码：

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 6

如果您想在AppBar 中水平显示多个项目，请将它们放在Toolbar 中，它会很好地显示。看到这个答案here知道原因。

如果您想将导航栏推到右侧，请在Tabs 之前添加Box 并将flexGrow 设置为1。这将创建一个空的 div 元素。它之所以有效，是因为Toobar 容器使用了弹性布局。

<AppBar position="static">
  <Toolbar>
    <IconButton size="large" edge="start" color="inherit" sx={{ mr: 2 }}>
      <MenuIcon />
    </IconButton>
    <Box flexGrow={1} />
    <Tabs textColor="inherit">
      <Tab label="One" />
      <Tab label="Two" />
      <Tab label="Three" />
    </Tabs>
  </Toolbar>
</AppBar>

完整示例

export default function Demo() {
  const [value, setValue] = React.useState(0);
  const handleChange = (_, newValue) => setValue(newValue);

  return (
    <>
      <AppBar position="static">
        <Toolbar>
          <IconButton size="large" edge="start" color="inherit" sx={{ mr: 2 }}>
            <MenuIcon />
          </IconButton>
          <Typography
            variant="h6"
            noWrap
            component="div"
            sx={{ display: { xs: "none", sm: "block" } }}
          >
            MUI
          </Typography>
          <Box flexGrow={1} />
          <Tabs value={value} onChange={handleChange} textColor="inherit">
            <Tab label="One" />
            <Tab label="Two" />
            <Tab label="Three" />
          </Tabs>
        </Toolbar>
      </AppBar>
      <div index={value} onChangeIndex={setValue}>
        <TabPanel value={value} index={0}>
          Item One
        </TabPanel>
        <TabPanel value={value} index={1}>
          Item Two
        </TabPanel>
        <TabPanel value={value} index={2}>
          Item Three
        </TabPanel>
      </div>
    </>
  );
}

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <div role="tabpanel" hidden={value !== index} {...other}>
      {value === index && (
        <Box sx={{ p: 3 }}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

现场演示

Answer 7

您是否阅读了 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)