Materialise-ui導航菜單

Question

如何填充導航菜單，當點擊左邊的圖標（如移動菜單）時，會出現一個下拉菜單？

/** 
* 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" 
    /> 
); 

Answer 1

你可以試試這個。這是剛剛從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; 

的例子只是調整iconElementLeft={this.state.logged ? <Logged /> : <Login />}