使用material-ui创建导航栏 [英] Creating a navbar with material-ui

问题描述

我正在尝试使用material-ui创建一个简单的导航栏，看起来就像他们在

非常感谢任何帮助。

解决方案

最新更新[2018]

尽可能看，它看起来有点难看，所以你可能想继续摆弄CSS以使标签显示在正确的位置。

注意：八个月前，< a href =https://github.com/callemall/material-ui/pull/3005#issuecomment-181281522 =nofollow noreferrer> PR被拒绝了。显然，在 AppBar 中显示标签并不是高优先级的，所以，hackfix解决方案就是你现在所拥有的一切！

哦使用预发布库的痛苦！

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:

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.

解决方案

Latest Update [2018]

Problem should be fixed in latest version.

Update #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).

But you are in luck: This PR provides a solution using CSS. It (kinda) works. Here is a screenshot:

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.

NOTE: Eight months ago, the PR got rejected. Apparently, displaying Tabs in AppBar is not high-priority, so, the hackfix solution is all you got at the moment!

Oh the agony of using pre-release libraries!

这篇关于使用material-ui创建导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！