2017-11-25 6 views
0

탐색 메뉴를 채우는 방법, 그래서 왼쪽의 아이콘 (모바일 메뉴처럼)을 클릭하면 드롭 다운 메뉴가 나타 납니까?구체화 -ui 탐색 메뉴

enter image description here

/** 
* A simple example of `AppBar` with an icon on the right. 
* By default, the left icon is a navigation-menu. 
*/ 
const AppBarExampleIcon =() => (
    <AppBar 
    title="Title" 
    /> 
); 

답변

0

이 시도 할 수 있습니다. 이것은 내가 그것을 불통과 도움이 iconElementLeft={this.state.logged ? <Logged /> : <Login />}

+0

단지 조정할 http://www.material-ui.com/#/components/app-bar

import React, {Component} from 'react'; import AppBar from 'material-ui/AppBar'; import IconButton from 'material-ui/IconButton'; import IconMenu from 'material-ui/IconMenu'; import MenuItem from 'material-ui/MenuItem'; import FlatButton from 'material-ui/FlatButton'; import Toggle from 'material-ui/Toggle'; import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert'; import NavigationClose from 'material-ui/svg-icons/navigation/close'; class Login extends Component { static muiName = 'FlatButton'; render() { return ( <FlatButton {...this.props} label="Login" /> ); } } const Logged = (props) => ( <IconMenu {...props} iconButtonElement={ <IconButton><MoreVertIcon /></IconButton> } targetOrigin={{horizontal: 'right', vertical: 'top'}} anchorOrigin={{horizontal: 'right', vertical: 'top'}} > <MenuItem primaryText="Refresh" /> <MenuItem primaryText="Help" /> <MenuItem primaryText="Sign out" /> </IconMenu> ); Logged.muiName = 'IconMenu'; /** * This example is taking advantage of the composability of the 'AppBar' * to render different components depending on the application state. */ class AppBarExampleComposition extends Component { state = { logged: true, }; handleChange = (event, logged) => { this.setState({logged: logged}); }; render() { return ( <div> <Toggle label="Logged" defaultToggled={true} onToggle={this.handleChange} labelPosition="right" style={{margin: 20}} /> <AppBar title="Title" iconElementLeft={<IconButton><NavigationClose /></IconButton>} iconElementRight={this.state.logged ? <Logged /> : <Login />} /> </div> ); } } export default AppBarExampleComposition; 

에서 불과 예입니다. 고맙습니다. – HomeMade