javascript - react - Creando una barra de navegación con material-ui

material ui themes

Question

Intento crear una barra de navegación simple con material-ui que se parece a la que usan en su sitio . Este es el código que escribí para tratar de replicarlo:

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)

El problema es que las pestañas están saliendo muy raras y hacer clic en las pestañas no tiene ningún efecto. Captura de pantalla:

Cualquier ayuda sería muy apreciada.

Answer 1

¿Has leído la documentación Material-UI?

Intente pasar su contenido como el iconElementRight .

es decir:

render() {
    var myTabs = (
        <Tabs>
            <Tab label="item 1" />
            <Tab label="item 2" />
        </Tabs>
    );
    return <AppBar title="My App" iconElementRight={myTabs} />
}

Aunque, parece que solo hay 3 estilos que son compatibles (como se ve en los 3 ejemplos en los documentos). Es posible que deba ser creativo con el estilo, ya que no parece ser muy flexible.

PD: buena suerte, porque desde que cambiaron a estilos en línea y sus propios temas personalizados, es bastante difícil cambiar las cosas o integrar otros componentes que no son mui (me quedé tan impresionado por esto que creé un tenedor que usa SASS https: / /www.npmjs.com/package/material-ui-with-sass )

Answer 2

¿Has usado el plugin react-tap-event-plugin? De acuerdo con https://github.com/callemall/material-ui/issues/288 es necesario.

Answer 3

Creo que la respuesta de Kabir es un buen comienzo y también incluiría las <Tabs> en un <ToolbarGroup > ya que AppBar es un subconjunto de barras de herramientas.

p.ej

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

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

Answer 4

Tenía el mismo problema.

Resulta que es un error (# 773) .

Pero estás de suerte: este RP proporciona una solución usando CSS. Es (un poco) funciona. Aquí hay una captura de pantalla:

Como puede ver, se ve un poco feo, por lo que es posible que desee seguir jugando con el CSS para que las pestañas aparezcan en el lugar correcto.

NOTA: Hace ocho meses, el RP fue rechazado . Aparentemente, mostrar Tabs en AppBar no es de alta prioridad, ¡así que la solución de hackfix es todo lo que tienes en este momento!

¡Oh, la agonía de usar bibliotecas de prelanzamiento!

ACTUALIZAR

Al menos, la voluntad está allí . ¡No toda la esperanza está perdida!

Answer 5

Además del hack de CSS, descubrí que puedes usar entidades HTML como un hack para dividir el texto de las pestañas. Puede agregar   al principio y al final de las etiquetas de pestañas y tiene su espacio.

Hace que la cadena de etiquetas sea fea, pero si no te importa tanto, hace el trabajo bastante bien, y también te permite agregar tantos espacios como desees.

Aquí está el código actualizado:

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)

Y captura de pantalla: pestañas con espacios

Answer 6

Un poco tarde para la fiesta, pero una solución que me ha funcionado. Para su información, esta es una aplicación de React / Redux con un back-end de 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>
    )
  }

Luego, alguna otra lógica para mostrar la AppBar adecuada de acuerdo con el estado de autenticación de los usuarios.

Realmente no creo que las pestañas sean parte de la barra de aplicaciones. La especificación del material los muestra como una barra de herramientas secundaria.