2017-11-25 9 views
0

ナビゲーションメニューを埋め込む方法は、左側のアイコン(モバイルメニューのようなもの)をクリックするとドロップダウンメニューが表示されますか?マテリアライズ - ナビゲーションメニュー

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

関連する問題