не может отображать элементы на панели навигации в соответствии с необходимостью

Я использую reactjs и material-ui для разработки своего приложения. Разрабатываю дашборд. Раньше я использовал response-mdl для компонента, и при его использовании компонент navbar работал должным образом. Я хочу использовать material-ui, хотя в нем много компонентов и поддержки. Он более зрелый, чем react-mdl. Все работает отлично, кроме компонента навигационной панели, где я использовал AppBar.

Ниже приведен снимок экрана панели навигации, которую я разработал с использованием как material-ui, так и react-mdl. Мне нужна вторая панель навигации (она разработана с использованием response-mdl) с использованием material-ui, чего я не мог. Я попытался использовать вкладку внутри AppBar, но не повезло. Концепция состоит в том, что сначала будет 2 вкладки, и когда щелкнет значок добавления, который находится справа, пользователь сможет добавить туда новую вкладку. Как я могу оформить его таким же образом?

введите здесь описание изображения

Вот мой код

render() {
    const navigation = (
      <BottomNavigation style={{ background:'transparent'}}>
        <i className="material-icons md-23">delete</i>
        <i className="material-icons md-23">add_circle</i>
      </BottomNavigation>
    )

    return (
      <div>
        <div className="mdlContent" style={{height: '900px', position: 'relative'}}>
        <AppBar  iconElementRight={navigation} >
        </AppBar>
)

reactjs javascript material-ui
person Serenity    schedule 04.10.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете сделать это, передав component в качестве заголовка компоненту <AppBar/>.

Проверьте следующее перо:

https://codepen.io/pranesh-r/pen/LROLbo

Вместо использования tabs внутри navBar, что немного сложно, вы можете использовать <a> и обрабатывать маршрут для визуализации конкретной страницы.

person Pranesh Ravi    schedule 04.10.2016
comment
Эта работа, но я создал массив навигации внутри состояния, потому что пользователь должен добавлять вкладки. - person Serenity; 04.10.2016
comment
Большое спасибо за обмен знаниями. - person Serenity; 04.10.2016

arrow_upward
1
arrow_downward

Вот один из способов - поместите элементы навигации в массив в вашем состоянии. Вы можете добавлять в этот массив новые элементы. Используйте вкладки на панели навигации для отображения элементов:

getInitialState(){
  const navigation = [
   { id: 0, description: "Dashboard"},
   { id: 1, description: "My Device"},
   { id: 2, description: "Follow"}
  ]; 
}

render(){
<div>
  <Tabs onChange={this.handleChange}>
    {this.state.navigation.map( function(result, index){
      return <Tab key={result.id} label={result.description} value={index}/>
    })}        
  </Tabs>
</div>

Ознакомьтесь с библиотекой swipeableviews: https://github.com/oliviertassinari/react-swipeable-views. Вы можете поместить представления в одну и ту же функцию рендеринга, чтобы каждая вкладка имела соответствующий вид для отображения содержимого меню.

<div>
  <SwipeableViews>
  ...
  </SwipeableViews
</div>
person genestd    schedule 04.10.2016
comment
Большое спасибо за обмен знаниями. - person Serenity; 04.10.2016