Создание навигационной панели с помощью материала-ui

Я пытаюсь создать простой навигатор с материалом-ui, который выглядит так, как тот, который они используют на на своем сайте. Это код, который я написал, чтобы попытаться его воспроизвести:

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)

Проблема в том, что вкладки выглядят очень странно, и щелчок по вкладкам не имеет никакого эффекта. Снимок экрана:

Любая помощь будет очень оценена.

Ответы

Ответ 1

Имел ту же проблему.

Оказывается, это ошибка (# 773).

Но вам повезло: Этот PR предоставляет решение с использованием CSS. Это (kinda) работает. Вот скриншот:

Как вы можете видеть, это выглядит немного уродливым, поэтому вы можете продолжать играть с CSS, чтобы получить вкладки в нужном месте.

ПРИМЕЧАНИЕ. Восемь месяцев назад PR был отклонен. По-видимому, отображение Tabs в AppBar не является высокоприоритетным, поэтому решение hackfix - это все, что вы получили на данный момент!

О, муки использования библиотек до выпуска!

UPDATE

По крайней мере, есть воля - Не всякая надежда потеряна!

Ответ 2

Я думаю, что ответ Кабира - хороший старт, и я бы также обернул <Tabs> в <ToolbarGroup >, поскольку AppBar является подмножеством панелей инструментов.

например.

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

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

Ответ 3

Немного поздно для вечеринки, но решение, которое сработало для меня. FYI, это приложение React/Redux с бэкэндом 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>
    )
  }

Затем некоторая другая логика, чтобы показать соответствующий AppBar в соответствии с состоянием аутентификации пользователей.

Я действительно не думаю, что вкладки должны быть частью панели приложений. Спецификация Material показывает их как дополнительную панель инструментов.

Ответ 4

Используете ли вы плагин action-tap-event-plug-in? Согласно https://github.com/callemall/material-ui/issues/288, это необходимо.

Ответ 5

Помимо взлома CSS, я обнаружил, что вы можете использовать HTML-объекты в качестве взлома, чтобы разделить текст вкладок. Вы можете добавить   в начало и конец ярлыков вкладок, и у вас есть свободное место.

Это делает строку ярлыка уродливой, но если вам все равно, что она работает очень хорошо, а также позволяет добавлять как можно больше пробелов.

Вот обновленный код:

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)

И скриншот: Вкладки с пробелами

Ответ 6

Вы прочитали документацию Material-UI ?

Попробуйте передать свой контент в качестве iconElementRight prop.

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

Хотя, похоже, есть только 3 стиля, которые поддерживаются (как видно из 3-х примеров в документах). Возможно, вам придется проявить творческий подход к стилю, потому что он не выглядит очень гибким.

PS удачи, потому что, поскольку они переключаются на встроенные стили и собственные пользовательские темы, довольно сложно изменить что-либо или интегрировать другие компоненты, отличные от mui (я был настолько оттолкнут этим, я создал вилку, которая использует SASS https://www.npmjs.com/package/material-ui-with-sass)