html - 如何使菜单切换器在 PrimeNg 中消失
问题描述
我在我的角度项目中使用 PrimeNg,我找不到一个简单的解决方案来使菜单切换器消失。我在第一张图片中解释了我有什么,在第二张图片中我想要什么。我们走吧:
我正在根据您的评论添加一些代码片段,我希望它比图像更有帮助。
HTML:
...
<p-panelMenu class="global-navigation-menu" [model]="items" [multiple]="false"></p-panelMenu>
...
TS:
...
this.items =
[
{ separator: true },
{
label: 'Dashboard', icon: 'pi pi-fw pi-globe', items: [
{
label: 'Projects', icon: 'pi pi-fw pi-bars', items: [
{
label: 'Mock project', items: [
{ label: 'Version 1' }
]
},
{ label: 'Empty project' }
]
}
]
}
];
...
CSS(整体):
:host {
::ng-deep .ui-panelmenu-header > a {
border: none!important;
background-color: transparent!important;
color: #ffffff!important;
}
.ui-panelmenu-icon {
color: #ffffff!important;
}
::ng-deep .ui-panelmenu-content {
border: none!important;
background-color: transparent!important;
color: #ffffff;
}
::ng-deep .ui-menuitem-text {
color: #ffffff!important;
font-size: 14px;
}
::ng-deep .ui-menuitem-icon {
color: #ffffff;
}
::ng-deep .ng-star-inserted:before {
color: #ffffff;
}
::ng-deep .pi-chevron-right:before {
color: #ffffff;
}
::ng-deep .ng-star-inserted{
background-color: transparent!important;
color: #ffffff;
}
::ng-deep .ng-menu-link{
color: #ffffff!important;
}
::ng-deep .ui-sidebar-mask{
background-color: transparent;
}
::ng-deep .ui-button-icon-only{
border: none!important;
// background-color: transparent!important;
}
::ng-deep .ng-reflect-ng-class{
z-index: 0!important;
}
::ng-deep .ui-sidebar-active{
border: none!important;
background-color: transparent!important;
box-shadow: none!important;
width: 272px!important;
}
::ng-deep .ui-sidebar-left{
border: none!important;
background-color: transparent!important;
}
::ng-deep .ui-sidebar{
border: none!important;
background-color: transparent!important;
}
::ng-deep .ui-button-icon-only{
border: none!important;
background-color: transparent!important;
}
}
.sidebar-button
{
margin-left: 230px;
margin-top: 4px;
}
.sidebar
{
margin-top: 86px;
width: calc(100vh - 86px);
}
.global-logotype-graphics
{
position: absolute;
width: 100%;
bottom: 0px;
right: 0px;
}
.global-navigation-menu
{
position: relative;
top: 6px;
}
.global-navigation-menu-small
{
position: relative;
}
.global-pegasus-graphics
{
position: absolute;
width: 74%;
right: 13%;
left: 13%;
bottom: 10%;
}
.navigation
{
position: relative;
height: calc(100vh - 86px);
width: 272px;
margin-top: calc(86px - 8px);
margin-left: -16px;
background-image: linear-gradient(#33435B, #0076BB);
}
.navigation-small
{
position: relative;
height: calc(100vh - 86px);
width: 62px;
margin-top: 0px;
margin-left: -8px;
background-image: linear-gradient(#33435B, #0076BB);
}
解决方案
添加此 css 以删除菜单切换器
::ng-deep .ui-panelmenu-icon {
display: none;
}
推荐阅读
- php - 我添加到此表单的数据未添加到 WAMP 数据库
- post - 发布请求使用 HttpClient Angular 5 给出 401 Unauthorized user 错误
- cypress - Cypress w/graphql - 在通过 UI 进行测试时遇到问题。存根突变的更好方法?
- android - 使用轮播布局管理器检测 recyclerView 中的居中项目
- pandas - Pandas DataFrame - 过滤,聚合,然后分配回原始的预过滤数据集?
- javascript - React JSX 动态 SVG 翻译错误
- javascript - Jquery 选择器仅在下拉列表中第一次工作
- java - 稍后在 Java 中修改 ByteArrayOutputStream .write 值
- jquery - 预置点击事件仅显示几秒钟
- c++ - 如何将不同的对添加到集合中?