wake-up-neo.com

Erstellen einer Navbar mit Material-Ui

Ich versuche, eine einfache Navbar mit Material-Ui zu erstellen, die der von ihrer Site ähnelt. Dies ist der Code, den ich geschrieben habe, um ihn zu replizieren:

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)

Das Problem ist, dass die Registerkarten sehr seltsam erscheinen und das Klicken auf die Registerkarten keinerlei Auswirkung hat. Bildschirmfoto: enter image description here

Jede Hilfe wäre sehr dankbar.

21
saadq

Letztes Update [2018]

Problem sollte in der neuesten Version behoben sein.

Update Nr. 1 [2016]

Zumindest der Wille ist da - Nicht alle Hoffnung ist verloren!

Ursprünglicher Beitrag

Hatte das gleiche Problem.

Es stellt sich heraus, dass es ein Fehler (# 773) ist.

Aber Sie haben Glück: Diese PR bietet eine Lösung mit CSS. Es funktioniert (irgendwie). Hier ist ein Screenshot:

 enter image description here

Wie Sie sehen, sieht es etwas hässlich aus, Sie möchten also weiter mit CSS arbeiten, damit die Registerkarten an der richtigen Stelle erscheinen.

HINWEIS: Vor acht Monaten wurde die PR wurde abgelehnt . Anscheinend hat die Anzeige von Tabs in AppBar keine hohe Priorität, daher ist die Hackfix-Lösung alles, was Sie im Moment haben!

Oh, wie qualvoll es ist, Bibliotheken vor der Veröffentlichung zu verwenden!

8
Domi

Ich denke, Kabirs Antwort ist ein guter Anfang und ich würde auch den <Tabs> in einen <ToolbarGroup > einwickeln, da die AppBar eine Untermenge von Symbolleisten ist.

z.B. 

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

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

2
Aleck Landgraf

Etwas spät zur Party, aber eine Lösung, die für mich funktioniert hat. Zu Ihrer Information, dies ist eine React/Redux-App mit einem Rails-Backend.

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>
    )
  }

Dann eine andere Logik, um die entsprechende AppBar entsprechend dem Authentifizierungsstatus des Benutzers anzuzeigen.

Ich glaube nicht, dass Tabs Teil der App-Leiste sein sollen. Die Materialspezifikation zeigt sie als sekundäre Symbolleiste.

1
J. Parrish

Neben dem CSS-Hack habe ich herausgefunden, dass Sie HTML Entities als Hack verwenden können, um den Text der Registerkarten zu teilen. Sie können am Anfang und am Ende der Tabulatorbeschriftungen &nbsp; hinzufügen.

Dies macht den Label-String hässlich, aber wenn Sie sich nicht so sehr darum kümmern, erledigt das die Arbeit ziemlich gut und es erlaubt Ihnen auch, so viele Leerzeichen wie gewünscht hinzuzufügen.

Hier ist der aktualisierte 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="&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)

Und Screenshot: Tabs mit Leerzeichen

0

Haben Sie das React-Tap-Event-Plugin verwendet? Laut https://github.com/callemall/material-ui/issues/288 ist es notwendig.

0
QuestionMark