快乐江米在线编程平台制作记录5——菜单栏修改之加几个菜单项

作品分类:SCRATCH3 2019-11-10

1、要修改的文件位置:

src/components/menu-bar/menu-bar.jsx

2、具体步骤:

找到代码:

 <div

 className={classNames(styles.menuBarItemstyles.hoverable, {

 [styles.active]: this.props.fileMenuOpen

})}

onMouseUp={this.props.onClickFile}

>

</div>

这个<div>标签包含了“文件”菜单的所有内容。就是点击菜单栏上的“文件”两个字后显示的“内容”

在其中找到如下代码:

 <FormattedMessage
   defaultMessage="File"
    description="Text for file dropdown menu"
    id="gui.menuBar.file"
/>


这段是“文件”两个字的英文。不要删除和修改,因为全靠它来进行多语言切换的。

往下找到标签:

 <MenuBarMenu
className={classNames(styles.menuBarMenu)}
open={this.props.fileMenuOpen}
place={this.props.isRtl ? 'left' : 'right'}
onRequestClose={this.props.onRequestCloseFile}

                            >

</MenuBarMenu>



这个标签包含的就是点击“文件”之后出现的子菜单。

然后我们就要在这个子菜单中添加几个菜单项。

菜单项的标签如下:

<MenuSection>
    <MenuItem
        isRtl={this.props.isRtl}
        onClick={this.handleClickNew}
    >
        {newProjectMessage}
    </MenuItem>
</MenuSection>

标签<MenuSection><MenuSection>是菜单项的分组

分组与分组之间会有分割线

标签:<MenuItem></MenuItem>是菜单项分组中的菜单项,如:新建,保存,另存之类的具体的命令项。

我们在“新作品”菜单项所在的菜单组下面复制一个菜单组,然后在里面加入一些菜单项,如下:

 

<MenuSection>
    <MenuItem
        isRtl={this.props.isRtl}
        // onClick={this.handleClickNew}
    >
        保存到账号
    </MenuItem>
    <MenuItem
        isRtl={this.props.isRtl}
        // onClick={this.handleClickNew}
    >
        另存到账号
    </MenuItem>
    <MenuItem
        isRtl={this.props.isRtl}
        // onClick={this.handleClickNew}
    >
        查看在线作品
    </MenuItem>
</MenuSection>


保存,效果如下:

屏幕快照 2019-11-10 下午9.35.51.png




二维码
意见反馈