使用 Material-UI 创建导航栏

IT技术 javascript reactjs material-ui

2021-04-27 05:31:18

我正在尝试使用 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个回答

更新 #1 [2016]

至少，意志是存在的——并不是所有的希望都消失了！

原帖

有同样的问题。

事实证明，这是一个错误 (#773)。

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

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

注意：八个月前，PR 被拒绝了。显然，显示Tabs在AppBar不高的优先级，这样，hackfix解决方案是你的时刻了！

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

我认为 Kabir 的回答是一个良好的开端，我也会将<Tabs>a包装<ToolbarGroup >成AppBar工具栏的子集。

例如

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

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

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

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

其它你可能感兴趣的问题

上一篇聚丙烯的理想印刷条件是什么？下一篇将 CAT6 电缆用于 3D 打印机电机/传感器/风扇

使用 Material-UI 创建导航栏

最新更新 [2018]

更新 #1 [2016]

原帖