Material-ui AppBar/ToolBar를 가로 탭 메뉴 레이아웃으로 설정할 수 있습니까?

Question

material-ui 구성 요소를 사용하여 웹 응용 프로그램의 가로 탐색 메뉴를 만드는 방법을 찾고 있습니다.

그것은 매우 일반적인 메뉴의 모습입니다 때문에, 나는 이러한 구성의 예를 들어 검색되었지만 없습니다 발견에 다음이 문서의 웹 사이트를 반응에 나는 메뉴와 매우 비슷한 시작하고 싶습니다 그것도 물질 - ui 워드 프로세서 또는 여기에서 (similar solution가 있지만 정확히 필요한 것은 아닙니다).

어떻게 하시겠습니까?

Answer 1

내 솔루션은 AppBar의 iconElementRight 속성 내에 ToolbarGroup 구성 요소를 배치하는 것입니다.

// Defining a stateless, functional component, MyNavLinks. 
// This component contains your navigation links. 

const MyNavLinks =() => (
    <ToolbarGroup> 
    <FlatButton label="Dashboard" containerElement={<Link to="dashboard"/>}/> 
    <FlatButton label="Settings" containerElement={<Link to="settings" />}/> 
    <FlatButton label="Profile" containerElement={<Link to="profile" />}/> 
    </ToolbarGroup> 
); 


// Another stateless, functional component, MyAppBar. 
// Here we are setting the iconElementRight property of Material UI's AppBar 
// to the component defined above. 

const MyAppbar =() => (
    <AppBar 
     title="Brand" 
     iconElementRight={<MyNavLinks />} 
    /> 
); 

결과 :