繁体   English   中英

如何在Angular4的PRIMENG中的对话框组件的标题中创建按钮

[英]How to Make a Button in the Header of Dialog Component in PRIMENG in Angular4

我想在primeng对话框窗口的标题中放置一个按钮。 该代码的链接为https://www.primefaces.org/primeng/#/dialog

要求是要在顶部标题的右侧添加两个按钮(带有图像或任何图标作为计算器和问号),并且这些按钮应调用方法abc()。

代码如下:

model.component.html
---------------------
<p-dialog header="top header title pass here" [(visible)]="display" modal="modal" 
draggable="true" dismissableMask="true" positionTop="50" padding="0px" width="1200" 
height="350" [responsive]="true">
   // here two buttons btn1 and btn2(with icons) next to 'fa fa-fw fa-close' icon.
    <p>The stor.</p>
    <p-footer>
        <button type="button" pButton icon="fa-check" (click)="display=false" 
         label="Yes">hghk</button>
    </p-footer>
</p-dialog>

 <button type="button" (click)="showDialog()" pButton icon="fa-external-link-square" 
  label="Show">Lead</button>

model.component.ts
---------------------
  display = false;
  showDialog() {
    this.display = true;
  }

您需要像这样使用p-dialog的p-header属性:

<p-dialog [(visible)]="display" modal="modal" draggable="true" dismissableMask="true" positionTop="50" padding="0px" width="1200" height="350" [responsive]="true">
    <p-header>
        top header title pass here
        <button type="button" pButton icon="fa-calculator" (click)="abc()"></button>
        <button type="button" pButton icon="fa-question" (click)="abc()"></button>
    </p-header>

    <p>The stor.</p>

    <p-footer>
        <button type="button" pButton icon="fa-check" (click)="display=false" label="Yes">hghk</button>
    </p-footer>
</p-dialog>

然后,您应该能够添加使按钮浮动到标题右侧的css。

使用<p-header>标记:

<p-dialog [(visible)]="display">
    <p-header>
        Header content here <button type="button" (click)="headerBtn()" pButton icon="fa fa-address-book" label="header"></button>
    </p-header>

    Modal Content

    <p-footer>
        <button type="button" pButton icon="fa-check" label="Yes"></button>
    </p-footer>
</p-dialog>

<button type="button" pButton label="modal" (click)="displayDialog()"></button>

我制作了一个小插棒,展示了如何在模式标题中放置按钮:

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM