如何更改蓝图菜单项的默认行为？

Posted 2023-03-05

【中文标题】如何更改蓝图菜单项的默认行为？

【英文标题】：How can I change default behavior of blueprint's menu item?

【发布时间】：2020-12-05 01:27:07

【问题描述】：

对于我的 react 项目的菜单，我使用了来自 '@blueprintjs/core' 的 MenuItem 如图所示，当我悬停有子项的菜单项时，它们从右侧打开。有没有办法改变它并在其父项下打开子子菜单？

这是我的代码`

import React from 'react';
import  MenuItem  from '@blueprintjs/core';
import Style from './styled';

const leftMenu = () => 

const Items = createNav.map(menuItem => 
    let children;
    if ('children' in menuItem) 
        children = menuItem.children.map(child => 
            return (
                <MenuItem
                    icon=child.icon
                    text=child.title
                    href=child.path
                    key=menuItem.path
                    />
                );
            );
        
        return (
            <Style.MenuItem
                icon=menuItem.icon
                text=menuItem.title
                href=menuItem.path
                key=menuItem.path
            >
                children
            </Style.MenuItem>
        );
    );
    return <Style.Menu>Items</Style.Menu>;
;

export default LeftMenu;

对于样式我使用 styled-components

 const Menu = styled(bpMenu)`
     padding: 0 !important;
     background-color: transparent !important;
`;

const MenuItem = styled(Item)`
     background-color: red ;
     margin: 5px;
`;

【问题讨论】：

你能解决这个问题吗？据我所知，我认为你需要一架手风琴。

【参考方案1】：

它会自动打开吗？我遇到了一个问题，即使我没有悬停也没有点击，子菜单会自动打开！！！

然后在 popover2 中添加autoFocus=false。这是我的代码示例

<Popover2
     content=
       <>
        <Menu key="menu">
          <MenuItem icon="camera" text="Menu 1"></MenuItem>
          <MenuItem icon="dollar" text="Menu 2" disabled=true />
          <MenuItem  icon="lifesaver" text="Football">
               <MenuItem icon="chart" text="Team 1" />
               <MenuItem icon="chart" text="Team 2" />
               <MenuItem icon="chart" text="Team 3" />
         </MenuItem>                                        
       </Menu>
      </>
     
     position="bottom"
     interactionKind="hover"
     autoFocus=false
>
     <Button
         text="vivid..."
         minimal
         large=false
         className="b f5 white _btn_"
         intent="none"
         icon="share"
     />
</Popover2>

而对于navBar的样式，也可以关注blueprintjs的navBar