Question

我很难对齐AppBar中的某些元素。我需要在所有元素之后将MoreVertIcon放在右边，但它始终显示在孩子们之前：

这是我的代码：

export default class MainMenu extends React.Component {
    render() {
        return (
            <AppBar title="Dashboard" iconElementRight={
                <IconMenu
                    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>
            }>
                <FlatButton label="Foo" style={styles.items}/>
                <FlatButton label="Bar" style={styles.items}/>
            </AppBar>
        );
    }
}

Answer 1

我刚为这样的所有右手做了一个组件：

var RightSideStuff = React.createClass({
   render() {
    return (
        <span>
            <FlatButton label="Foo" style={styles.items}/>
            <FlatButton label="Bar" style={styles.items}/>

             <IconMenu
                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>
        </span>
    );

}

}）;

然后将其包含在原始组件中：

  <AppBar title="Dashboard"
          iconElementRight={<RightSideStuff/>}
          style={styles.appbar}
  />

这使得appubar可以将所有内容显示为一个组而不是浏览器控制并按顺序呈现内容。

无法在AppBar中对齐项目

1 个答案: