是否可以设置 material-ui AppBar/ToolBar 以具有水平选项卡菜单布局？

Question

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

因为它是一个 quite 通用菜单外观，我正在搜索这种配置的示例，但无法在 material-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 />}
    />
);

结果：

是否可以设置 material-ui AppBar/ToolBar 以具有水平选项卡菜单布局？

Is it possible to set up material-ui AppBar/ToolBar to have a horizontal tab menu layout?

reactjs

react-jsx

material-ui