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

10

最新更新 [2018]

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

更新 #1 [2016]

至少,意志是存在的——不是所有的希望都消失了!

原帖

有同样的问题。

原来,这是一个错误 (#773)

但是你很幸运:这个 PR提供了一个使用 CSS 的解决方案。它(有点)有效。这是一个屏幕截图:

在此处输入图像描述

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

注意:八个月前,PR 被拒绝了。显然,显示Tabs不是AppBar高优先级,所以,hackfix 解决方案就是你目前所拥有的!

哦,使用预发布库的痛苦!

于 2016-10-13T08:24:12.107 回答
2

我认为 Kabir 的回答是一个好的开始,我也会将其包装<Tabs>在工具栏<ToolbarGroup >AppBar子集中。

例如

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

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

于 2016-09-11T22:37:14.403 回答
1

聚会有点晚了,但一个对我有用的解决方案。仅供参考,这是一个带有 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 的一部分。材料规范将它们显示为辅助工具栏。

于 2017-11-27T16:56:29.480 回答
0

如果要在 中水平显示多个项目AppBar,请将它们放在 a中Toolbar,它会很好地显示。请在此处查看此答案以了解原因。

如果要将导航栏推到右侧BoxflexGrow1Tabs. 这将创建一个空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>
  );
}

现场演示

编辑 33005883/creating-a-navbar-with-material-ui

于 2021-09-18T06:21:45.150 回答
0

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

于 2016-07-08T14:03:33.803 回答
0

除了 CSS hack,我发现你可以使用HTML Entities作为 hack 来拆分标签文本。您可以添加&nbsp;到选项卡标签的开头和结尾,并且您有自己的空间。

它使标签字符串变得丑陋,但如果您不太在意,它可以很好地完成工作,并且它还允许您添加任意数量的空格。

这是更新的代码:

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)

和截图: 带空格的标签

于 2017-03-10T16:24:37.873 回答
-2

您是否阅读了 Material-UI文档

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

IE:

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 )

于 2015-10-08T05:01:37.263 回答