#html #css #reactjs #styled-components #blueprint
#HTML #css #reactjs #styled-компоненты #blueprint
Вопрос:
Для меню моего проекта react я использовал MenuItem из «@blueprintjs / core», и, как показано на рисунке, при наведении курсора на пункт меню, у которого есть дочерние элементы, они открываются с правой стороны. Есть ли способ изменить это и открыть дочернее подменю под его родительским элементом?
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. Вы смогли это исправить? Из того, что я вижу, я предполагаю, что вам нужен аккордеон.
Ответ №1:
открывается ли он автоматически? Я столкнулся с проблемой, подменю открывались автоматически, хотя я не зависал и не нажимал!!!
затем добавлено autoFocus={false}
в popover2. вот мой пример кода
<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>
А для оформления панели навигации вы также можете следовать за панелью навигации blueprintjs