时间戳

首页 > 解决方案 > PrimeNg- 侧边栏模块未正确显示

angular - PrimeNg- 侧边栏模块未正确显示

问题描述

在此处输入图像描述我正在尝试创建一个右侧边栏 1 导航（单击时打开btn1），并且在其中应该从顶部打开另一个边栏导航（单击时打开btn2），其中边栏 2 应该在覆盖之外，只要它打开。（覆盖是每个侧边栏都不正确）。

我正在使用这个primeng链接- https://www.primefaces.org/primeng/#/sidebar

https://stackblitz.com/edit/primeng-template-4gf9tj?file=app%2Fapp.component.html

注意：-当侧边栏1打开时，黑色背景会覆盖全屏，同样当侧边栏2从顶部打开时，侧边栏1上应该有黑色背景。

标签： angularprimengangular7

解决方案

根据 primefaces文档。

baseZIndex -number - 0- 在分层中使用的基本 zIndex 值。

您需要应用z-index到-1图层，它似乎在它的顶部。

像这样

<button (click)="openTab()">btn1</button>
<p-sidebar class="menuPanel" [(visible)]="opened" position="right" [showCloseIcon]="true" autoZIndex="true" baseZIndex="-1">
Sidebar1
<button (click)="openTab2()">btn2</button>
    <p-sidebar class="menuPanel" [(visible)]="filterStatus" position="top" [showCloseIcon]="true" autoZIndex="false" baseZIndex="-1">
       sidebar2
    </p-sidebar>
</p-sidebar>

编辑：

所以，这似乎不是primeng的问题

我相信你忘了包括主题风格

我添加了

<link rel="stylesheet" type="text/css" href="/node_modules/primeicons/primeicons.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/nova-light/theme.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />

按照此处所述

现在效果很好

这是改变的东西

<button (click)="openTab()">btn1</button>
<p-sidebar class="menuPanel" [(visible)]="opened" position="right" [showCloseIcon]="true" autoZIndex="true" baseZIndex="99999">
Sidebar1
<button (click)="openTab2()">btn2</button>
    <p-sidebar class="menuPanel" [(visible)]="filterStatus" position="top" [showCloseIcon]="true" autoZIndex="false" baseZIndex="9999999">
       sidebar2
    </p-sidebar>
</p-sidebar>

演示

推荐阅读