Javascript 使用 material-ui 创建导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33005883/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a navbar with material-ui
提问by saadq
I'm trying to create a simple navbar with material-ui that looks like the one they use on their site. This is the code I wrote to try to replicate it:
我正在尝试创建一个带有 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)
The problem is, the tabs are coming up very weird and clicking on the tabs have no effect whatsoever. Screenshot: 
问题是，标签出现非常奇怪，点击标签没有任何效果。截屏：
Any help would be very much appreciated.
任何帮助将不胜感激。
回答by Domi
Latest Update [2018]
最新更新 [2018]
Problem should be fixed in latest version.
Update #1 [2016]
更新 #1 [2016]
At least, the will is there- Not all hope is lost!
至少，意志是存在的——并不是所有的希望都消失了！
Original Post
原帖
Had the same issue.
有同样的问题。
Turns out, it's a bug (#773).
原来，这是一个错误 (#773)。
But you are in luck: This PRprovides a solution using CSS. It (kinda) works. Here is a screenshot:
但是你很幸运：这个 PR提供了一个使用 CSS 的解决方案。它（有点）有效。这是一个屏幕截图：
As you can see, it looks a bit ugly, so you might want to keep fiddling with the CSS to get the tabs appear in the right place.
正如您所看到的，它看起来有点难看，因此您可能希望继续摆弄 CSS 以使选项卡出现在正确的位置。
NOTE: Eight months ago, the PR got rejected. Apparently, displaying Tabsin AppBaris not high-priority, so, the hackfix solution is all you got at the moment!
注意：八个月前，PR 被拒绝了。显然，显示Tabs在AppBar不高的优先级，这样，hackfix解决方案是你的时刻了！
Oh the agony of using pre-release libraries!
哦，使用预发布库的痛苦！
回答by Aleck Landgraf
I think Kabir's answer is a good start and I would also wrap the <Tabs>in a <ToolbarGroup >as the AppBaris subset of toolbars.
我认为 Kabir 的回答是一个良好的开端，我也会将<Tabs>a包装<ToolbarGroup >成AppBar工具栏的子集。
e.g.
例如
iconElementRight={<ToolbarGroup >{myTabs}</ToolbarGroup>}
回答by J. Parrish
A little late to the party, but a solution that has worked for me. FYI, this is a React/Redux app with a Rails backend.
聚会有点晚，但对我有用的解决方案。仅供参考，这是一个带有 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>
)
}
Then some other logic to show the appropriate AppBar according to the users state of authentication.
然后一些其他逻辑根据用户的身份验证状态显示适当的 AppBar。
I don't really think that tabs are meant to be part of the App Bar. The Material spec shows them as a secondary toolbar.
我真的不认为标签是应用程序栏的一部分。材料规范将它们显示为辅助工具栏。
回答by Rares Lucian Oroian
Besides the CSS hack, I found out that you can use HTML Entitiesas a hack to split the tabs text. You can add to the beginning and ending of the tab labels and you have your space.
除了 CSS hack，我发现你可以使用HTML Entities作为一个 hack 来拆分标签文本。您可以添加 到选项卡标签的开头和结尾，并且您有自己的空间。
It makes the label string ugly but if you don't care that much it does the work pretty well, and it also allow you to add as many spaces as you wish.
它使标签字符串变得丑陋，但如果您不那么在意，它可以很好地完成工作，并且还允许您添加任意数量的空格。
Here is the updated code:
这是更新后的代码：
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)
And screenshot: Tabs with spaces
和屏幕截图： 带空格的标签
回答by Julia
Have you used the react-tap-event-plugin? According to https://github.com/callemall/material-ui/issues/288it's needed.
你用过 react-tap-event-plugin 吗？根据https://github.com/callemall/material-ui/issues/288需要它。
回答by sarink
Did you read the Material-UI documentation?
您是否阅读了 Material-UI文档？
Try passing your content as the iconElementRightprop.
尝试将您的内容作为iconElementRight道具传递。
ie:
IE：
render() {
var myTabs = (
<Tabs>
<Tab label="item 1" />
<Tab label="item 2" />
</Tabs>
);
return <AppBar title="My App" iconElementRight={myTabs} />
}
Although, it does appear there are only 3 styles that are supported (as seen by the 3 examples in the docs). You might have to get creative with the styling, because it doesn't appear to be very flexible.
虽然，它似乎只支持 3 种样式（如文档中的 3 个示例所示）。您可能需要在样式上发挥创意，因为它看起来不太灵活。
PS good luck, because since their switch to inline-styles and their own custom themes, it's pretty hard to change things or integrate other non-mui components (I was so put-off by this I created a fork that uses SASS https://www.npmjs.com/package/material-ui-with-sass)
PS祝你好运，因为自从他们切换到内联样式和他们自己的自定义主题后，很难改变东西或集成其他非mui组件（我对此非常失望，我创建了一个使用SASS的分支https：/ /www.npmjs.com/package/material-ui-with-sass)
