ng-ytl-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
241 lines (240 loc) • 8.44 kB
HTML
<article>
<section class="markdown"><h1>Input 输入框</h1>
<section class="markdown"><p>通过鼠标或键盘输入内容，是最基础的表单域的包装。</p>
<h2 id="何时使用"><span>何时使用</span>
<!-- <a class="anchor">#</a> -->
</h2>
<ul>
<li><p>需要用户输入表单域内容时。</p></li>
<li><p>提供组合型输入框，带搜索的输入框，还可以进行大小选择。</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-input-demo-basic" [nzCode]="NzDemoInputBasicCode">
<nz-demo-input-basic demo></nz-demo-input-basic>
<div intro>
<p>基本使用。</p>
</div>
</nz-code-box>
<nz-code-box [nzTitle]="'前置/后置标签'" id="components-input-demo-add-on" [nzCode]="NzDemoInputAddOnCode">
<nz-demo-input-add-on demo></nz-demo-input-add-on>
<div intro>
<p>用于配置一些固定组合</p>
</div>
</nz-code-box>
<nz-code-box [nzTitle]="'搜索框'" id="components-input-demo-search" [nzCode]="NzDemoInputSearchCode">
<nz-demo-input-search demo></nz-demo-input-search>
<div intro>
<p>带有搜索按钮的输入框。</p>
</div>
</nz-code-box>
<nz-code-box [nzTitle]="'适应文本高度的文本域'" id="components-input-demo-textarea-auot-size" [nzCode]="NzDemoInputTextareaAutoSizeCode">
<nz-demo-input-textarea-auot-size demo></nz-demo-input-textarea-auot-size>
<div intro>
<p><code>nzAutosize</code> 属性适用于 <code>textarea</code> 节点，并且只有高度会自动变化。另外 <code>nzAutosize</code> 可以设定为一个对象，指定最小行数和最大行数。</p>
</div>
</nz-code-box>
<nz-code-box [nzTitle]="'前缀与后缀'" id="components-input-demo-affix" [nzCode]="NzDemoInputAffixCode">
<nz-demo-input-affix demo></nz-demo-input-affix>
<div intro>
<p>在输入框上添加前缀或后缀图标。</p>
</div>
</nz-code-box>
</div>
<div nz-col [nzSpan]="12">
<nz-code-box [nzTitle]="'三种大小'" id="components-input-demo-size" [nzCode]="NzDemoInputSizeCode">
<nz-demo-input-size demo></nz-demo-input-size>
<div intro>
<p>我们为 <code>nz-input</code> 输入框定义了三种尺寸（大、默认、小），高度分别为 <code>32px</code>、<code>28px</code> 和 <code>22px</code>。
</p>
<p>注意： 在表单里面，我们只使用大尺寸的输入框。</p>
</div>
</nz-code-box>
<nz-code-box [nzTitle]="'输入框组合'" id="components-input-demo-group" [nzCode]="NzDemoInputGroupCode">
<nz-demo-input-group demo></nz-demo-input-group>
<div intro>
<p>输入框的组合展现。</p>
</div>
</nz-code-box>
<nz-code-box [nzTitle]="'文本域'" id="components-input-demo-textarea" [nzCode]="NzDemoInputTextareaCode">
<nz-demo-input-textarea demo></nz-demo-input-textarea>
<div intro>
<p>用于多行输入，指定 <code>nzType</code> 为一个特殊的 <code>textarea</code>。可以用 <code>nzRows</code> 或是 <code>nzAutosize</code> 来控制框的高度。</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="Input"><span>nz-input</span>
<!-- <a class="anchor">#</a> -->
</h3>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>ngModel</td>
<td>当前input数值，可以双向绑定</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>nzType</td>
<td>【必须】声明 input 类型，同原生 input 标签的 type 属性。另外提供 <code>nzType="textarea"</code>。</td>
<td>String</td>
<td>'text'</td>
</tr>
<tr>
<td>nzPlaceHolder</td>
<td>在文字框中显示提示讯息</td>
<td>String</td>
<td>无</td>
</tr>
<tr>
<td>nzSize</td>
<td>控件大小，默认值为 default 。注：标准表单内的输入框大小限制为 large。</td>
<td>'large'|'default'|'small'</td>
<td>'default'</td>
</tr>
<tr>
<td>nzDisabled</td>
<td>是否禁用状态，默认为 false</td>
<td>bool</td>
<td>false</td>
</tr>
<tr>
<td>nzReadonly</td>
<td>是否只读状态，默认为 false</td>
<td>bool</td>
<td>false</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>#addonBefore</td>
<td>设置前置标签</td>
<td>ng-template</td>
<td>-</td>
</tr>
<tr>
<td>#addonAfter</td>
<td>设置后置标签</td>
<td>ng-template</td>
<td>-</td>
</tr>
<tr>
<td>#prefix</td>
<td>带有前缀图标的 input</td>
<td>ng-template</td>
<td>-</td>
</tr>
<tr>
<td>#suffix</td>
<td>带有后缀图标的 input</td>
<td>ng-template</td>
<td>-</td>
</tr>
</tbody>
</table>
<h4 id="Input.TextArea"><span>nz-input[type=textarea]</span>
<!-- <a class="anchor">#</a> -->
</h4>
<p>当 <code>nzType="textarea"</code> 时，特有的API</p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>nzAutosize</td>
<td>自适应内容高度，可设置为 true|false 或对象：<code>{{'{ minRows: 2, maxRows: 6 }'}}</code></td>
<td>Boolean|Object</td>
<td><code>false</code></td>
</tr>
<tr>
<td>nzRows</td>
<td>控制固定框的行数</td>
<td>String</td>
<td>无</td>
</tr>
</tbody>
</table>
<h4 id="Input.Search"><span>nz-input[type=search]</span>
<!-- <a class="anchor">#</a> -->
</h4>
<p>当 <code>nzType="search"</code> 时，特有的API</p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>nzOnSearch</td>
<td>回车或点击搜索按钮时的回调</td>
<td>EventEmitter<string></td>
<td>-</td>
</tr>
</tbody>
</table>
<h4 id="Input.Group"><span>nz-input-group</span>
<!-- <a class="anchor">#</a> -->
</h4>
<p>在nz-input-group中需要使用[nz-input]的directive，而非component进行组合，具体见demo</p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>nzSize</td>
<td><code>nz-input-group</code> 中所有的 <code>nz-input</code> 的大小</td>
<td>'large'|'default'|'small'</td>
<td>'default'</td>
</tr>
<tr>
<td>nzCompact</td>
<td>是否用紧凑模式</td>
<td>Boolean</td>
<td>false</td>
</tr>
</tbody>
</table>
</section>
</article>