单行输入

单行输入是比较常见的文本输入组件，适用于用户信息的录入，以及密码输入等场景。

概念说明

属性

组件通用属性请参见组件通用说明。

• 类型：文本框或者密码框。

  • 文本：文本类型。
  • 密码：密码类型。

• 值：输入框的值。

• 清除按钮：是否在输入框有内容时会显示清除内容的按钮。

  

• 显示/隐藏密码：切换密码的显示/隐藏。

  

• 占位符：内容为空时的提示文本。

  

• 最大长度：限定输入文本最大长度。

• 自动获取焦点：是否自动获取输入框焦点。

• 只读：正常显示，但禁止选择或输入。

• 禁用：置灰显示，且禁止任何交互（焦点、点击、选择、输入等）。

  

• 宽度：设置单行输入框宽度大小，可选占满、巨大、大、中型、正常、小、迷你。

• 高度：设置单行输入框高度大小，可选占满、巨大、大、中型、正常、小、迷你。

• 前缀图标：设置输入框的前缀图标。

  

• 后缀图标：设置输入框的后缀图标。

  

事件

• 鼠标事件：获得焦点、失去焦点。
• 组件事件：输入前、输入时、改变后、清空前、清空后、点击前缀图标、点击后缀图标。

事件名	触发条件
获得焦点	输入框获得焦点后
失去焦点	输入框失去焦点后
输入前	输入内容前，可以在这个阶段阻止输入，或者修改输入的值
输入时	输入内容时
改变后	组件原有值发生变化后
清空前	清空内容前
清空后	清空内容后
点击前缀图标	点击前缀图标时，触发某些操作
点击后缀图标	点击后缀图标时，触发某些操作

样式

样式说明请参见组件通用说明。

主题样式

• 边框颜色
  • border-color：输入框边框颜色，如 #223325。默认值#e5e5e5。
  • border-color-hover：鼠标hover到输入框时边框的颜色值，如 #223325。默认值#4c88FF。
  • border-color-focus：鼠标聚焦到输入框时边框的颜色值，如 #223325。默认值#4c88FF。
  • border-color-disabled：当输入框是禁用状态时的边框颜色值，如 #223325。默认值#e5e5e5。
• 边框宽度
  • border-width：输入框边框宽度，如 1px。默认值1px。
  • box-shadow-focus：鼠标聚焦到输入框时边框的阴影效果值，如 2px 2px 2px 1px rgba(0, 0, 0, 0.2)。默认值0 0 0 2px rgba(77, 136, 255, 0.2)。
• 圆角
  • border-radius：输入框圆角，如 1px。border-radius包含4个值，按顺序是上圆角、右圆角、下圆角、左圆角，数值个数可以是1至4个。1个表示所有圆角值都相等，2个表示上下同一个值左右同一个值，3个表示左右同一个值。默认值4px。
• 边框阴影
  • box-shadow-focus-color：鼠标聚焦到输入框时边框的阴影颜色，如 #223325。默认值rgba(77, 136, 255, 0.2)
• 占位符文本
  • placeholder-color：输入框占位符文本颜色，如 #223325。默认值#ccc。
• 宽度
  • width：输入框高度，如 1px。默认值240px。
• 高度
  • height：输入框高度，如 1px。默认值32px。
• 内边距
  • padding-x：输入框水平方向内边距，如 1px。这里只设置左右两边的边距。可填写1个值或者2个值。默认值10px。
• 前缀/后缀
  • prefix-padding-left：输入框前缀左边距，如 1px。默认值36px。
  • prefix-placeholder-left：输入框前缀提示信息左边距，如 1px。默认值27px。
  • suffix-padding-right：输入框后缀右边距，如 1px。默认值30px。
• 背景色
  • background：输入框背景色，如 #223325。默认值#fff。
  • background-disabled：禁用输入框背景色，如 #223325。默认值#F7F8FA。
• 文字颜色
  • color：输入框文字颜色,如 #223325。默认值#333。
  • color-disabled：禁用输入框文字颜色,如 #223325。默认值#999。