reactjs - 如何在 CoreUI React 的下拉菜单中获取子菜单?
问题描述
我正在使用 CoreUI React 免费版。目前要实现一个简单的下拉菜单,这是需要做的
<CDropdown
inNav
className="c-header-nav-items mx-2"
direction="down"
>
<CDropdownToggle className="c-header-nav-link" caret={false}>
<div className="c-avatar">
<CImg
src={'avatars/user.jpg'}
className="c-avatar-img"
alt="admin@bootstrapmaster.com"
/>
</div>
</CDropdownToggle>
<CDropdownMenu className="pt-0" placement="bottom-end">
<CDropdownItem
header
tag="div"
color="light"
className="text-center"
>
<strong>Account</strong>
</CDropdownItem>
<CDropdownItem>
<CIcon name="cil-user" className="mfe-2" />Profile
</CDropdownItem>
<CDropdownItem>
<CIcon name="cil-settings" className="mfe-2" />
Settings
</CDropdownItem>
<CDropdownItem>
<CIcon name="cil-credit-card" className="mfe-2" />
Payments
</CDropdownItem>
<CDropdownItem divider />
<CDropdownItem>
<CIcon name="cil-lock-locked" className="mfe-2" />
Logout
</CDropdownItem>
</CDropdownMenu>
</CDropdown>
现在我想向 Settings 添加一个子菜单,这样在单击Settings
时,另一个菜单会在其左侧打开,我可以单击它来选择适当的项目。像下面的东西
我在网上查找有关将子菜单集成到 CoreUI 中的下拉菜单的文档,但找不到任何东西。
Settings
我能得到的最接近的是对零件做这样的事情
<CDropdownItem>
<CIcon name="cil-settings" className="mfe-2" />
Settings
<CDropdownMenu>
<CDropdownItem>
Submenu Item 1
</CDropdownItem>
<CDropdownItem>
Submenu Item 2
</CDropdownItem>
</CDropdownMenu>
</CDropdownItem>
所以现在看起来像下面
Settings
但是正如您所看到的,子菜单没有对齐,默认情况下它是可见的,而不是单击第一个然后子菜单应该出现的预期行为。
CoreUI 有什么方法支持下拉菜单中的子菜单?或者有解决方法吗?
注意:我使用的是 CoreUI React 免费版,我当前的版本是 3.1.1
解决方案
推荐阅读
- c++ - 调用 dlopen 时未定义的符号(名称修改问题?)
- javascript - 如何在 React 中画一条带标题的线?
- python - FileNotFoundError:[Errno 2] 没有这样的文件或目录:'students.xlsx'
- linux - ldd 命令显示 so 文件要求的版本
- javascript - 防止在打印网页的pdf时打印白色空白纸
- mysql - 通过 SSH 隧道从远程访问 docker 上的本地 mysql
- angular - 尝试在 Angular Elements webcomponent 中区分“[object Object]”时出错
- python - 猜谜游戏 - Python 中的循环问题
- openshift - OpenShift:如何基于 ImageStream 更新应用程序
- html - 在网页上显示字体大小