은 필요에 따라 탐색 바에 항목을 표시 할 수 없습니다.

Question

내 응용 프로그램 개발을 위해 reactjs 및 material-ui를 사용하고 있습니다. 나는 계기판을 개발 중이다. 구성 요소에 react-mdl을 사용하고 Navbar 구성 요소를 사용하기 전에 예상대로 작동합니다. 나는 많은 요소와 지원을 가지고 있기 때문에 material-ui를 사용하고 싶습니다. 그것은 반응 -mdl보다 성숙합니다. 모든 것은 AppBar를 사용하는 navbar 구성 요소를 제외하고는 완벽하게 작동합니다.

다음은 material-ui 및 react-mdl을 사용하여 설계 한 navbar의 스크린 샷입니다. 나는 2 차 navbar (그것은 반응 - MDL을 사용하여 설계되었습니다) 재료 - UI를 사용하여 내가 할 수 없었 으면 좋겠어. AppBar 안의 탭을 사용해 보았지만 행운은 없었습니다. 개념은 처음에는 2 개의 탭이 있고 오른쪽에있는 추가 아이콘을 클릭하면 사용자가 거기에 새 탭을 추가하게됩니다. 어떻게 똑같은 방식으로 디자인 할 수 있습니까?

여기 당신은 <AppBar/> 구성 요소에 제목으로 component 전달을 통해이 작업을 수행 할 수 있습니다 내 코드

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

Answer 1

입니다.

확인 다음 펜 :

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

대신 조금 까다입니다 navBar 내부 tabs를 사용하여, 당신은 <a>를 사용하여 특정 페이지를 렌더링하는 경로를 처리 할 수 ​​있습니다.

Answer 2

여기에 하나의 방법이 있습니다. 내비게이션 항목을 내 상태의 배열에 넣으십시오. 이 배열에 새 항목을 추가 할 수 있습니다. 항목을 표시하려면 탐색 모음에서 탭을 사용하여

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>