Angular项目中Nebular框架展开菜单图标方向修改求助

你可以通过自定义CSS修改内置箭头的旋转角度来实现需求，无需替换图标或改变位置，具体操作如下：

1. 借助你已添加的.custom-menu类，在组件样式文件（或全局样式文件）中添加以下CSS规则：

/* 调整展开状态下菜单箭头的指向 */
.custom-menu .nb-menu-item.expanded .nb-menu-toggle-icon {
  transform: rotate(0deg);
}

/* 可选：确保收起状态箭头也保持朝右（可根据默认样式调整角度） */
.custom-menu .nb-menu-toggle-icon {
  transform: rotate(0deg);
}

2. 若上述规则不生效，可通过浏览器开发者工具定位箭头元素的具体类名（比如部分版本中箭头使用.nb-arrow-right类），调整CSS选择器：

.custom-menu .nb-menu-item.expanded .nb-arrow-right {
  transform: rotate(0deg);
}

原理：Nebular菜单的切换箭头会随菜单项展开状态自动添加/移除.expanded类，通过修改该状态下图标的旋转角度，就能直接改变箭头指向，完全保留原图标位置。

内容的提问来源于stack exchange，提问作者Camila Zelenovsky