p-dialog 样式介绍

p-dialog 是一个基于 PrimeNG 组件库实现的对话框组件样式。

• 弹出框样式优美，可扩展性强。

• 可对话框大小、位置、标题、内容等进行自定义配置，支持各种按钮操作。

• 配合 PrimeNG 提供的其他组件可以构建丰富的前端 UI 界面。

示例代码

下面是一个 p-dialog 示例代码片段：

<p-dialog header="提示" [(visible)]="dialogVisible" [style]="{ minWidth: '350px' }" #dialog>
  <div class="ui-g">
    <div class="ui-g-12">
      <p>这是一个对话框示例。</p>
    </div>
  </div>
  <p-footer>
    <button type="button" label="取消" class="ui-button-secondary" (click)="dialogVisible=false"></button>
    <button type="button" label="确定" class="ui-button-primary" (click)="dialogVisible=false"></button>
  </p-footer>
</p-dialog>

代码分析

• p-dialog 组件表示对话框组件，它包含多个属性，例如 header 表示对话框标题，visible 表示对话框是否可见，style 表示 CSS 样式，可以设置最小宽度等。

• div 标签内部可以插入自定义内容，例如上例中插入了一段提示信息。

• p-footer 表示底部按钮操作区，可以插入多个按钮，例如上例中插入了两个按钮，事件处理方法可以通过绑定 (click)="callback()" 的方式实现。

参考链接

• p-dialog - PrimeNG API