是否可以设置材料-ui AppBar / ToolBar以具有水平标签菜单布局？

Question

寻找使用material-ui组件为Web应用程序创建水平导航菜单的方法。我想从反应文档网站上的菜单开始：

由于这是一个非常常见的菜单外观，我正在搜索此类配置的示例，但无法在material-ui docs或SO（有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 />}
    />
);

结果：