Input 输入框

通过鼠标或键盘输入内容,是最基础的表单域的包装。

何时使用

  • 需要用户输入表单域内容时。

  • 提供组合型输入框,带搜索的输入框,还可以进行大小选择。

代码演示

基本使用。

用于配置一些固定组合

带有搜索按钮的输入框。

nzAutosize 属性适用于 textarea 节点,并且只有高度会自动变化。另外 nzAutosize 可以设定为一个对象,指定最小行数和最大行数。

在输入框上添加前缀或后缀图标。

我们为 nz-input 输入框定义了三种尺寸(大、默认、小),高度分别为 32px28px22px

注意: 在表单里面,我们只使用大尺寸的输入框。

输入框的组合展现。

用于多行输入,指定 nzType 为一个特殊的 textarea。可以用 nzRows 或是 nzAutosize 来控制框的高度。

API

nz-input

参数 说明 类型 默认值
ngModel 当前input数值,可以双向绑定 String -
nzType 【必须】声明 input 类型,同原生 input 标签的 type 属性。另外提供 nzType="textarea" String 'text'
nzPlaceHolder 在文字框中显示提示讯息 String
nzSize 控件大小,默认值为 default 。注:标准表单内的输入框大小限制为 large。 'large'|'default'|'small' 'default'
nzDisabled 是否禁用状态,默认为 false bool false
nzReadonly 是否只读状态,默认为 false bool false
nzBlur 失去焦点回调 EventEmitter
nzFocus 获取焦点回调 EventEmitter
#addonBefore 设置前置标签 ng-template -
#addonAfter 设置后置标签 ng-template -
#prefix 带有前缀图标的 input ng-template -
#suffix 带有后缀图标的 input ng-template -

nz-input[type=textarea]

nzType="textarea" 时,特有的API

参数 说明 类型 默认值
nzAutosize 自适应内容高度,可设置为 true|false 或对象:{{'{ minRows: 2, maxRows: 6 }'}} Boolean|Object false
nzRows 控制固定框的行数 String

nz-input-group

在nz-input-group中需要使用[nz-input]的directive,而非component进行组合,具体见demo

参数 说明 类型 默认值
nzSize nz-input-group 中所有的 nz-input 的大小 'large'|'default'|'small' 'default'
nzCompact 是否用紧凑模式 Boolean false