以下是我使用工具栏实现 LeftNav 的代码。我正在为流星使用 Material-UI 包。LeftNav 根本不显示。当与 AppBar 使用类似的配置时,它可以正常工作。需要一些帮助来解决问题。
var {Toolbar, ToolbarGroup, , ToolbarTitle, FontIcon,FlatButton,ToolbarSeparator,IconButton,LeftNav,FlatButton} = MUI;
let {SvgIcons} = MUI.Libs;
let LeftIcon = <SvgIcons.NavigationExpandMore />
let LeftIcon = <SvgIcons.NavigationExpandMore />
var menuItems = [
{ route: 'get-started', text: 'Get Started' },
{ route: 'customization', text: 'Customization' },
{ route: 'components', text: 'Components' },
{ type: MenuItem.Types.SUBHEADER, text: 'Resources' },
{
type: MenuItem.Types.LINK,
payload: 'https://github.com/callemall/material-ui',
text: 'GitHub'
},
{
text: 'Disabled',
disabled: true
},
{
type: MenuItem.Types.LINK,
payload: 'https://www.google.com',
text: 'Disabled Link',
disabled: true
}
];
injectTapEventPlugin();
Header = React.createClass({
_toggle(e){
e.preventDefault()
this.refs.leftNav.toggle()
},
render(){
return(
<div>
<LeftNav ref="leftNav" docked={false} menuItems={menuItems onLeftIconButtonTouchTap={this._toggle}} />
<Toolbar>
<ToolbarGroup key={0} float="left">
<ToolbarTitle text="React" />
</ToolbarGroup>
<ToolbarGroup key={1} float="right">
<FontIcon className="muidocs-icon-custom-sort" />
<FlatButton label="Questions" linkButton={true} href="/login" secondary={true}/>}
<ToolbarSeparator/>
{Meteor.userId() ? <FlatButton label="Logout" onClick={Meteor.logout}/> : <FlatButton label="Login" linkButton={true} href="/login" primary={true}/>}
</ToolbarGroup>
</Toolbar>
</div>
)
}
});