Angular PrimeNG p-dialog with tabs

Question

我正在使用 primeng 创建带有选项卡的对话框，这是我的模板：

<p-dialog [(visible)]="displayDialog" (onHide)="cancel()" [style]="{width: '50vw'}" [baseZIndex]="10000">
  <p-tabView [controlClose]="displayDialog">
    <p-tabPanel header="Header 1" [headerStyle]='{"width": "70px"}'>Text 1</p-tabPanel>
    <p-tabPanel header="Header 2" [headerStyle]='{"width": "70px"}'> Text 2</p-tabPanel>
    <p-tabPanel header="Header 3" [headerStyle]='{"width": "70px"}'>Tex 3</p-tabPanel>
  </p-tabView>
</p-dialog>

我得到这个结果

但是，我希望它像 Angular Material: (matDialog)

<mat-tab-group>
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

有没有办法像 Angular Material 使用 PrimeNG 一样？

Answer 1

是的，PrimeNG 支持 Material theme。这些是 Material 主题（前缀为：md）：

primeng/resources/themes/md-light-indigo/theme.css

primeng/resources/themes/md-light-deeppurple/theme.css

primeng/resources/themes/md-dark-indigo/theme.css

primeng/resources/themes/md-dark-deeppurple/theme.css

primeng/resources/themes/mdc-light-indigo/theme.css

primeng/resources/themes/mdc-light-deeppurple/theme.css

primeng/resources/themes/mdc-dark-indigo/theme.css

primeng/resources/themes/mdc-dark-deeppurple/theme.css

因此，您无需将 PrimeNG 组件切换为 Angular Material 组件，即可采用 Material 主题。

---

您可以通过以下方式导入所需的 Material 主题：

解决方案 1：将主题添加到 angular.json

angular.json

"styles": [
  "node_modules/primeng/resources/themes/md-light-indigo/theme.css"
]

Sample Solution 1 on StackBlitz

---

解决方案 2：将主题导入全局样式表

style.css

@import 'primeng/resources/themes/md-light-indigo/theme.css';

Sample Solution 2 on StackBlitz