时间戳

首页 > 解决方案 > Angular Primeng 侧边栏是透明的

angular - Angular Primeng 侧边栏是透明的

问题描述

我目前正在使用 PrimeNg v7 进行 Angular 7 项目。我想使用 PrimeNg 侧边栏模块，但我无法删除透明背景，并且在打开时没有出现阴影： 我得到了什么

我希望它就像在 primeNg 网站上一样： 我想要什么

这是我的代码：appcomponent.html

<!--The content below is only a placeholder and can be replaced.-->
<p-sidebar [(visible)]="display" [baseZIndex]="10000">
    <app-sidebar></app-sidebar>
</p-sidebar>

<button type="text" (click)="display = true" pButton icon="pi pi-plus" label="Show"></button>
<router-outlet></router-outlet>

app.module.ts ：

@NgModule({
  declarations: [
    AppComponent,
    SidebarComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    SidebarModule,
    ButtonModule,
    NgbModule
  ],
  providers: [{provide: 'pronosticServiceType', useClass: environment.pronosticServiceType}],
  bootstrap: [AppComponent]
})
export class AppModule { }

sidebar.component.html ：

<div>
  <div>
    <a href="/home">Home</a>
  </div>
  <div>
    <a href="/Pronostics">Pronostics</a>
  </div>
</div>

标签： angularprimengsidebar

解决方案

我假设您需要将primeNg 全局样式包含到您的项目中，如果您使用，angular-cli您可以在angular.json文件中执行此操作到styles您的项目数组中：

"styles": [
  "node_modules/primeicons/primeicons.css",
  "node_modules/primeng/resources/themes/nova-light/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  //...
],

如果没有帮助，请发表评论。

推荐阅读