web-dev-qa-db-ja.com

material-uiでnavbarを作成する

私は their site で使用しているもののように見えるmaterial-uiでシンプルなnavbarを作成しようとしています。これは、複製を試みるために私が書いたコードです。

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)

問題は、タブが非常に奇妙になっていて、タブをクリックしても何の効果もないことです。スクリーンショット： enter image description here

どんな助けも大歓迎です。

javascriptreactjsmaterial-ui
23
saadq

最新アップデート[2018]

問題は最新バージョンで修正される必要があります。

アップデート＃1 [2016]

少なくとも、 意志はそこにある -すべての希望が失われるわけではない！

元の投稿

同じ問題がありました。

結局のところ、それは bug（＃773） です。

しかし、あなたは幸運です： このPR はCSSを使用したソリューションを提供します。それ（ちょっと）動作します。これがスクリーンショットです：

enter image description here

ご覧のとおり、見た目が少しsoいので、CSSをいじり続けて、タブを正しい場所に表示することをお勧めします。

注：8か月前、 PRは拒否されました 。どうやら、TabsにAppBarを表示することは優先度が高くないため、現時点で得られるのはハックフィックスソリューションだけです！

プレリリースライブラリを使用することの苦痛！

8
Domi

Kabirの答えは良い出発点だと思うし、AppBarはツールバーのサブセットなので、<Tabs>を<ToolbarGroup >にラップすることもできると思います。

例えば.

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

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

2
Aleck Landgraf

パーティーに少し遅れましたが、私にとってはうまくいった解決策です。参考までに、これは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を表示する他のロジック。

タブはアプリバーの一部であるとは考えていません。マテリアルスペックは、それらをセカンダリツールバーとして表示します。

1
J. Parrish

CSSハックの他に、タブテキストを分割するためのハックとして HTMLエンティティ を使用できることがわかりました。あなたは付け加えられます &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)

スクリーンショット： タブ付きのタブ

0
Rares Lucian Oroian

React-tap-event-pluginを使用しましたか？ https://github.com/callemall/material-ui/issues/288 によると、必要です。

0
Julia