display: TextField family: Data Entry

TextField

单行/多行文本输入

API

Props

| 名称 | 说明 | 类型 | 默认值 | | :------------ | :------------------------------------------------------------------------------ | :----------------------------------------------- | :----- | | type | 输入框类型 可选值： text, url, password, tel, email, number | enum | text | | label | 标签文本 | string | | | icon | 输入框左侧图标 | string | | | labelWidth | 标签文本宽度 | string | | | labelType | 标签类型 可选值： inner upper dynamic | | | actionIcon | 输入框最右侧的图标 | node | | | multiline | 是否可以输入多行文本 | bool | false | | rows | 输入文本框的行数（在 multiline=true 时生效 ） | number | 3 | | value | 输入值（受控） | string | | defaultValue | 默认输入框的值（非受控） | string | | maxLength | 可输入的最大字符数 | number | | | limitHint | 是否显示输入字符的提示 | string | | | disabled | 输入框是否被禁用 | bool | false | | readOnly | 是否只读 | bool | false | | solo | 是否只有输入框，不包含 label 和 errorText 、HelpText） | bool | false | | outline | 是否显示边框 | bool | false | | clear | 是否可以被清除 | bool | false | | placeholder | 提示文案 | string | | | helpText | 帮助文案 | node | | | errorText | 错误文案（设置此项后，输入框变为 error 状态，helpText 无效） | node | | | align | 输入内容对齐方向 可选值： left，center，right | enum | left | | prepend | 前置内容 | node | | | append | 后置内容 | node | | | renderInput | 自定义渲染 <input /> | ({value, placeholder, align, style }) => RaxNode | | | onClick | 输入框部分被点击时的回调 | (): void | | | onActionClick | actionIcon 被点击时的回调 | (): void | | | onChange | change 事件的回调 | (value: string): void | | | onFocus | focus 事件的回调 | (): void | | | onBlur | blur 事件的回调 | (): void | |

CSS API

css 结构

<text-field>
  <text-field__input>
    <text-field__line>
      <text-field__input-addon>
        // prepend
        <text-field__input-addon-text>
          <text-field__input-content>
            <text-field__input-label>
              <text-field__input-element>
                <text-field__input-action>
                  <text-field__input-action-icon>
                    <text-field__input-addon>
                      // --append
                      <text-field__input-addon-text>
                        <text-field__helper>
                          <text-field__helper-text></text-field__helper-text></text-field__helper></text-field__input-addon-text></text-field__input-addon></text-field__input-action-icon></text-field__input-action></text-field__input-element></text-field__input-label></text-field__input-content></text-field__input-addon-text></text-field__input-addon></text-field__line></text-field__input
></text-field>

| 名称 | 说明 | | :------------------------------------------ | :--------------------------------------------------- | | text-field | 输入框容器样式 | | text-field__input | 输入框样式 | | text-field__input-label | 输入框标签样式 | | text-field__input-content | 输入框内容样式 | | text-field__input-element | 输入框 <input> 元素样式 | | text-field__input-action | 动作样式 （clear） | | text-field__input-action-icon | 动作图标样式 | | text-field__input-addon | addon 样式 | | text-field__input-addon--prepend | addon 前置时的样式 | | text-field__input-addon--append | addon 后置时的样式 | | text-field__input-addon-text | addon 文字 & icon 样式 | | text-field__line | 输入框外框线的样式 | | text-field__helper | 帮助区域样式 | | text-field__helper-text | 帮助文本样式 | | text-field--label-top__input-content | labelType="upper" 时的内容样式 | | text-field--label-top__input-label | labelType="upper" 时的标签样式 | | text-field--label--dynamic__input-content | labelType="dynamic" && outline={true} 时的内容样式 | | text-field--label--dynamic__input-label | labelType="dynamic" && outline={true} 时的标签样式 | | text-field--outline__input | outlint={true} 时输入框的样式 | | text-field--outline__line | outlint={true} 时外框线的样式 | | text-field--multiline__input | multiline={true} 时输入框的样式 | | text-field--multiline__input-content | multiline={true} 时外框线的样式 | | text-field--focused__input-label | 输入框获得焦点时的标签样式 | | text-field--focused__line | 输入框获得焦点时的外框线样式 | | text-field--error__input-label | errorText="xxx" 时的标签样式 | | text-field--error__line | errorText="xxx" 时的外框线样式 | | text-field--error__helper-text | errorText="xxx" 时的帮助文字样式 | | text-field--disabled__input | disabled={true} 时的输入框样式 | | text-field--disabled__input-label | disabled={true} 时的标签样式 | | text-field--disabled__input-element | disabled={true} 时的 input 样式 | | text-field--disabled__input-line | disabled={true} 时的外框线样式 |