Angular PrimeNG 菜单栏:隐藏菜单标题旁边的默认向下箭头
Angular PrimeNG menubar: Hide default down arrows next to menu titles
默认的 PrimeNG 菜单栏在每个主菜单标题旁边都有一个向下的小箭头。我想从 top-level 菜单标题中完全删除向下箭头。嵌套的 sub-menus 可能会显示右箭头以显示有 sub-menu,那些可以保留。以下是一些带有默认菜单栏的屏幕截图:
https://www.primefaces.org/primeng/showcase/#/menubar
我可以轻松更改菜单项中的图标,但找不到 change/hide 箭头的句柄。
我正在使用 Angular CLI 9.1.8 和 PrimeNG 9.1.0。
将其隐藏在 style.css 中更改其内容,如
.pi-caret-down::before{
content: "";
}
在开发者控制台检查元素字体名称,然后在 css 之前将其设为 content: "";
使用 display:none
的额外好处是可以调整 menuitem
容器的大小以针对删除的箭头图标进行调整。否则,您将留下空白 space.
.pi-caret-down {
display:none;
}
默认的 PrimeNG 菜单栏在每个主菜单标题旁边都有一个向下的小箭头。我想从 top-level 菜单标题中完全删除向下箭头。嵌套的 sub-menus 可能会显示右箭头以显示有 sub-menu,那些可以保留。以下是一些带有默认菜单栏的屏幕截图:
https://www.primefaces.org/primeng/showcase/#/menubar
我可以轻松更改菜单项中的图标,但找不到 change/hide 箭头的句柄。
我正在使用 Angular CLI 9.1.8 和 PrimeNG 9.1.0。
将其隐藏在 style.css 中更改其内容,如
.pi-caret-down::before{
content: "";
}
在开发者控制台检查元素字体名称,然后在 css 之前将其设为 content: "";
使用 display:none
的额外好处是可以调整 menuitem
容器的大小以针对删除的箭头图标进行调整。否则,您将留下空白 space.
.pi-caret-down {
display:none;
}