ng-ytl-zorro-antd/src/showcase/nz-demo-popconfirm/nz-demo-popconfirm.html

An enterprise-class UI components based on Ant Design and Angular

<article>
  <section class="markdown"><h1>Popconfirm 气泡确认框</h1>
    <section class="markdown"><p>点击元素，弹出气泡式的确认框。</p>
      <h2 id="何时使用"><span>何时使用</span><a  class="anchor">#</a></h2>
      <ul>
        <li><p>目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。</p></li>
        <li><p>和 confirm 弹出的全屏居中模态对话框相比，交互形式更轻量。</p></li>
      </ul>
    </section>
    <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2>
  </section>
  <div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'基本'" id="components-popConfirm-demo-basic" [nzCode]="NzDemoPopconfirmBasicCode">
        <nz-demo-popconfirm-basic demo></nz-demo-popconfirm-basic>
        <div intro>
          <p>最简单的用法。</p>
        </div>
      </nz-code-box>

      <nz-code-box [nzTitle]="'国际化'" id="components-popConfirm-demo-local" [nzCode]="NzDemoPopconfirmLocalCode">
        <nz-demo-popconfirm-locale demo></nz-demo-popconfirm-locale>
        <div intro>
          <p>设置<code>okText</code><code>cancelText</code>以自定义按钮文字。</p>
        </div>
      </nz-code-box>
    </div>
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'位置'" id="components-popConfirm-demo-location" [nzCode]="NzDemoPopconfirmLocationCode">
        <nz-demo-popconfirm-location demo></nz-demo-popconfirm-location>
        <div intro>
          <p>位置有十二个方向</p>
        </div>
      </nz-code-box>

      <nz-code-box [nzTitle]="'条件触发'" id="components-popConfirm-demo-kick" [nzCode]="NzDemoPopconfirmKickCode">
        <nz-demo-popconfirm-kick demo></nz-demo-popconfirm-kick>
        <div intro>
          <p>可以判断是否需要弹出。</p>
        </div>
      </nz-code-box>
    </div>
  </div>
  <section class="markdown api-container"><h2 id="API"><span>API</span><!-- <a class="anchor">#</a> --></h2>
    <h3 id="Rate"><span>nz-popconfirm</span><!-- <a class="anchor">#</a> --></h3>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzTitle</td>
          <td>确认框描述 </td>
          <td>String</td>
          <td>无</td>
        </tr>
        <tr>
          <td>nzOnConfirm</td>
          <td>点击确认的回调</td>
          <td>event</td>
          <td>无</td>
        </tr>
        <tr>
          <td>nzOnCancel</td>
          <td>点击取消的回调</td>
          <td>event</td>
          <td>无</td>
        </tr>
        <tr>
          <td>nzOkText</td>
          <td>确认按钮文字</td>
          <td>String</td>
          <td>确定</td>
        </tr>
        <tr>
          <td>nzCancelText</td>
          <td>取消按钮文字	</td>
          <td>String</td>
          <td>取消</td>
        </tr>
        <tr>
          <td>nzCondition</td>
          <td>是否直接执行确定方法</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzPlacement</td>
          <td>气泡框位置，可选
            <code>top</code><code>left</code><code>right</code><code>bottom</code><code>topLeft</code><code>topRight</code>
            <br>
            <code>bottomLeft</code><code>bottomRight</code><code>leftTop</code><code>leftBottom</code><code>rightTop</code><code>rightBottom</code>
          </td>
          <td>String</td>
          <td>top</td>
        </tr>
        <tr>
          <td>nzTemplate</td>
          <td>覆盖Confirm全部弹出框
          </td>
          <td>ng-template</td>
          <td></td>
        </tr>
        <tr>
          <td>nzVisible</td>
          <td>用于手动控制浮层显隐 双向绑定</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzVisibleChange</td>
          <td>显示隐藏的回调</td>
          <td>EventEmitter</td>
          <td>无</td>
        </tr>
        <tr>
          <td>nzTrigger</td>
          <td>触发行为，可选 <code>hover/focus/click</code>
          </td>
          <td>String</td>
          <td>click</td>
        </tr>
        <tr>
          <td>nzOverlayClassName</td>
          <td>卡片类名</td>
          <td>String</td>
          <td>无</td>
        </tr>
        <tr>
          <td>nzOverlayStyle</td>
          <td>卡片样式</td>
          <td>object</td>
          <td>无</td>
        </tr>
        <tr>
          <td>nzMouseEnterDelay</td>
          <td>鼠标移入后延时多少才显示 Tooltip，单位：秒（nzTrigger='hover'时有效）</td>
          <td>number</td>
          <td>0</td>
        </tr>
        <tr>
          <td>nzMouseLeaveDelay</td>
          <td>鼠标移出后延时多少才隐藏 Tooltip，单位：秒（nzTrigger='hover'时有效）</td>
          <td>number</td>
          <td>0.1</td>
        </tr>
      </tbody>
    </table>

  </section>
</article>