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:
Toute aide serait très appréciée.
Le problème devrait être corrigé dans la dernière version.
Au moins, la volonté est là - Tout espoir n'est pas perdu!
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:
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!
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>}
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.
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
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=" Item 1 " />
<Tab label=" Item 2 " />
<Tab label=" Item 3 " />
<Tab label=" Item 4 " />
</Tabs>
</AppBar>
)
}
}
React.render(<Nav />, document.body)
Et capture d'écran: Onglets avec espaces
Avez-vous utilisé le plugin react-tap-event? Selon https://github.com/callemall/material-ui/issues/288 c'est nécessaire.