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

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

<article>
  <section class="markdown"><h1>InputNumber字输入框</h1>
    <section class="markdown"><p>通过鼠标或键盘，输入范围内的数值。</p>
      <h2 id="何时使用"><span>何时使用</span>
        <!-- <a class="anchor">#</a> -->
      </h2>
      <p>当需要获取标准数值时。</p></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-input-number-demo-basic" [nzCode]="NzDemoInputNumberBasicCode">
        <nz-demo-input-number-basic demo></nz-demo-input-number-basic>
        <div intro>
          <p>数字输入框</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'不可用'" id="components-input-number-disabled" [nzCode]="NzDemoInputNumberDisabledCode">
        <nz-demo-input-number-disabled demo></nz-demo-input-number-disabled>
        <div intro>
          <p>点击按钮切换可用状态。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'格式化展示'" id="components-input-number-formatter" [nzCode]="NzDemoInputNumberFormatterCode">
        <nz-demo-input-number-formatter demo></nz-demo-input-number-formatter>
        <div intro>
          <p>通过 <code>nzFormatter</code> 格式化数字，以展示具有具体含义的数据，往往需要配合 <code>nzParser</code> 一起使用。</p>
        </div>
      </nz-code-box>
    </div>
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'三种大小'" id="components-input-number-demo-size" [nzCode]="NzDemoInputNumberSizeCode">
        <nz-demo-input-number-size demo></nz-demo-input-number-size>
        <div intro>
          <p>三种大小的数字输入框，当 nzSize 分别为 <code>large</code> 和 <code>small</code> 时，输入框高度为 <code>32px</code> 和
            <code>22px</code> ，默认高度为 <code>28px</code></p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'小数'" id="components-input-number-demo-digit" [nzCode]="NzDemoInputNumberDigitCode">
        <nz-demo-input-number-digit demo></nz-demo-input-number-digit>
        <div intro>
          <p>和原生的数字输入框一样，value 的精度由 nzStep 的小数位数决定。</p>
        </div>
      </nz-code-box>
    </div>
  </div>
  <section class="markdown api-container">
    <h2 id="API"><span>API</span>
      <!-- <a class="anchor">#</a> -->
    </h2>
    <p>属性如下</p>
    <table>
      <thead>
        <tr>
          <th>成员</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>ngModel</td>
          <td>当前值，可双向绑定</td>
          <td>Number</td>
          <td></td>
        </tr>
        <tr>
          <td>nzPlaceHolder</td>
          <td>placeholder</td>
          <td>String</td>
          <td>''</td>
        </tr>
        <tr>
          <td>nzMin</td>
          <td>最小值</td>
          <td>Number</td>
          <td>-Infinity</td>
        </tr>
        <tr>
          <td>nzMax</td>
          <td>最大值</td>
          <td>Number</td>
          <td>Infinity</td>
        </tr>
        <tr>
          <td>nzStep</td>
          <td>每次改变步数，可以为小数</td>
          <td>Number or String</td>
          <td>1</td>
        </tr>
        <tr>
          <td>nzDisabled</td>
          <td>禁用</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzSize</td>
          <td>输入框大小</td>
          <td>String</td>
          <td>无</td>
        </tr>
        <tr>
          <td>nzBlur</td>
          <td>失去焦点回调</td>
          <td>EventEmitter</td>
          <td>无</td>
        </tr>
        <tr>
          <td>nzFocus</td>
          <td>获取焦点回调</td>
          <td>EventEmitter</td>
          <td>无</td>
        </tr>
        <tr>
          <td>nzFormatter</td>
          <td>指定输入框展示值的格式</td>
          <td>function(value: number | string): string</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzParser</td>
          <td>指定从 nzFormatter 里转换回数字的方式，和 nzFormatter 搭配使用</td>
          <td>function( string): number</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzAllowClear</td>
          <td>是否允许清空input number中的数值</td>
          <td>boolean</td>
          <td>false</td>
        </tr>
      </tbody>
    </table>
  </section>
</article>