应用栏就像Google收件箱网络应用

Question

我正在构建一个反应式Web应用程序。我正在使用材料ui。我希望像谷歌收件箱一样有一个appbar（下面附有截图）。目前我从材料ui模块导入了Appbar，但它只包含标题，导航图标。我希望在我的应用栏中有一个搜索栏，个人资料照片等，就像谷歌收件箱一样。如何定制它以获得类似的设计。我是否需要使用材料ui的appbar进行调整（如果是，那么具体如何）还是我必须做其他事情？

Answer 1

const rightButtons = (
<div>
 <FlatButton key={1} label="Btn1"/>
 <FlatButton key={2} label="Btn2" />
<div>
)   //Style as per your requirement, Also implement search textfield component
// Drawer with list items
<Drawer/>
<AppBar
  title="Inbox"
  iconElementLeft={<SearchComponent/>}
  iconElementRight={rightButtons}
  onLeftIconButtonTouchTap={this.handleLeftDrawerToggle}
/>

使用iconElementLeft和iconElementRight。 Docs of AppBar

Answer 2

作为第二个选项，您也可以使用备用框架react-materialize，因为它具有您的要求。

<Navbar brand='logo' right>
  <NavItem href='get-started.html'><Icon>search</Icon></NavItem>
  <NavItem href='get-started.html'><Icon>view_module</Icon></NavItem>
  <NavItem href='get-started.html'><Icon>refresh</Icon></NavItem>
  <NavItem href='get-started.html'><Icon>more_vert</Icon></NavItem>
</Navbar>