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

Question

寻找使用material-ui组件为Web应用程序创建水平导航菜单的方法.我想从与react文档网站上的菜单非常相似的东西开始:

由于这是一个非常常见的菜单外观,我正在寻找这样的配置的例子,但是无法在材料-ui文档或SO在这里找到它(有一个类似的解决方案,但它并不完全是需要的).

这该怎么做？

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 />}
    />
);

结果: