App-Leiste wie Google Inbox Web App

Question

Ich baue eine Web-Anwendung reagieren. Ich benutze Material ui dafür. Ich suche eine Appbar wie Google Inbox hat (Screenshot unten angehängt). Momentan habe ich Appbar aus dem Material-UI-Modul importiert, aber es enthält nur Titel, Navigationssymbol. Ich möchte eine Suchleiste, ein Profilfoto usw. in meiner App-Leiste haben, genau wie Google Inbox. Wie kann ich es anpassen, um ein Design wie dieses zu bekommen. Muss ich mit der App-Leiste von Material ui optimieren (wenn ja, wie genau) oder muss ich etwas anderes machen?

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

nutzen iconElementLeft und iconElementRight.

Answer 2

Als zweite Option können Sie auch das alternative Framework react-materialize verwenden, da es exakt Ihre Anforderungen erfüllt.

<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>