web-dev-qa-db-fra.com

Créer une barre de navigation avec material-ui

J'essaie de créer une barre de navigation simple avec du matériel-ui qui ressemble à celui qu'ils utilisent sur leur site . Voici le code que j'ai écrit pour essayer de le répliquer:

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)

Le problème, c’est que les onglets arrivent très bizarrement et que cliquer sur les onglets n’a aucun effet. Capture d'écran:  enter image description here

Toute aide serait très appréciée.

javascriptreactjsmaterial-ui
21
saadq

Dernière mise à jour [2018]

Le problème devrait être corrigé dans la dernière version.

Mise à jour # 1 [2016]

Au moins, la volonté est là - Tout espoir n'est pas perdu!

Poste originale

Avait le même problème.

Il s'avère que c'est un bug (# 773) .

Mais vous avez de la chance: Ce PR fournit une solution utilisant CSS. Cela fonctionne (un peu). Voici une capture d'écran:

 enter image description here

Comme vous pouvez le constater, cela semble un peu moche, vous voudrez peut-être continuer à jouer avec les CSS pour que les onglets apparaissent au bon endroit.

NOTE: Il y a huit mois, le PR a été rejeté . Apparemment, afficher Tabs dans AppBar n’est pas une priorité absolue, la solution de hackfix est donc tout ce que vous avez pour le moment!

Oh l'agonie d'utiliser des bibliothèques de pré-version!

8
Domi

Je pense que la réponse de Kabir est un bon début et je voudrais aussi envelopper le <Tabs> dans un <ToolbarGroup > car la AppBar est un sous-ensemble de barres d’outils.

par exemple. 

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

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

2
Aleck Landgraf

Un peu tard pour la fête, mais une solution qui a fonctionné pour moi. Pour votre information, ceci est une application React/Redux avec un backend Rails.

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

Ensuite, une autre logique pour afficher la barre d’application appropriée en fonction de l’authentification de l’utilisateur.

Je ne pense pas vraiment que les onglets sont censés faire partie de la barre des applications. La spécification Matériau les affiche en tant que barre d’outils secondaire.

1
J. Parrish

Outre le hack CSS, j'ai découvert que vous pouvez utiliser Entités HTML comme un hack pour diviser le texte des onglets. Vous pouvez ajouter &nbsp; au début et à la fin des étiquettes d'onglets et vous disposez de votre espace.

Cela rend la chaîne de caractères moche, mais si vous ne l'êtes pas beaucoup, le travail est plutôt efficace et vous permet également d'ajouter autant d'espaces que vous le souhaitez.

Voici le code mis à jour:

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)

Et capture d'écran: Onglets avec espaces

0
Rares Lucian Oroian

Avez-vous utilisé le plugin react-tap-event? Selon https://github.com/callemall/material-ui/issues/288 c'est nécessaire.

0
QuestionMark