跳到主要内容

输入框 Input

输入框用于通过键盘输入内容，适用于单行文本

API

安装使用​

import { TiInput } from '@titian-design/mobile-react'

用法示例​

基本用法​

const App: React.FC = () => {
  return (
    <>
      <TiInput label="左侧标题" placeholder="用户输入中文案" />
      <TiInput disabled label="禁用" />
      <TiInput readOnly label="只读" />
      <TiInput maxlength={20} label="最大输入长度20" />
      <TiInput divider={false} label="不显示底部分割线" />
      <TiInput required label="必填" />
      <TiInput clearable={false} label="不显示清除按钮" />
    </>
  )
}

输入类型​

const App: React.FC = () => {
  return (
    <>
      <TiInput type="text" label="文本" />
      <TiInput type="number" label="数字" />
      <TiInput type="safe-password" label="密码安全输入键盘" />
      <TiInput type="digit" label="带小数点的数字键盘" />
    </>
  )
}

键盘类型​

当只需要弹起特定类型键盘，无需对输入内容格式化的情况推荐使用。详情见input原生inputmode

const App: React.FC = () => {
  return (
    <>
      <TiInput inputmode="decimal" label="文本" />
    </>
  )
}

输入对齐方式​

const App: React.FC = () => {
  return (
    <>
      <TiInput textAlign="left" label="标题" />
      <TiInput textAlign="right" label="标题" />
    </>
  )
}

左侧label文字缺省的行数​

const App: React.FC = () => {
  return (
    <>
      <TiInput ellipsisLine={0} label="左侧标题超过一行换行" />
      <TiInput ellipsisLine={1} label="左侧标题超过一行显示..." />
      <TiInput ellipsisLine={2} label="左侧标题超过两行显示..." />
    </>
  )
}

label左侧搭配图标​

const App: React.FC = () => {
  return (
    <>
      <TiInput prefixIcon="home" label="标题" />
    </>
  )
}

输入框左右使用插槽​

const App: React.FC = () => {
  return (
    <>
      <TiInput label="手机号">
        <div slot="prefix">+ 86</div>
      </TiInput>
      <TiInput label="验证码">
        <div slot="suffix">发验证码</div>
      </TiInput>
    </>
  )
}

错误提示​

const App: React.FC = () => {
  return (
    <>
      <TiInput error value="输错了" label="标题" />
      <TiInput errorMessage="手机号格式错误" value="123213" label="手机号" />
    </>
  )
}

键盘确认按钮文字​

const App: React.FC = () => {
  return (
    <>
      <TiInput confirmType="done" label="完成" />
      <TiInput confirmType="send" label="发送" />
      <TiInput confirmType="search" label="搜索" />
      <TiInput confirmType="next" label="下一项" />
      <TiInput confirmType="go" label="前往" />
    </>
  )
}

TiInput API​

属性 Properties​

名称类型必填默认值说明备注
typestring否textinput 的类型,可选值为 text number digit safe-password , 以及iniput 原生 type-
inputmodestring否text键盘类型，更多取值见input原生inputmode
valuestring否-当前输入的值-
passwordboolean否false是否是密码类型-
placeholderstring否-输入框为空时占位符-
disabledboolean否false是否禁用-
maxlengthnumber否140最大输入长度，设置为 -1 的时候不限制最大长度-
prefixIconstring否-左侧图标名称-
labelstring否-输入框左侧文本-
dividerboolean否true是否显示底部分割线-
requiredboolean否false是否显示必填星号-
clearableboolean否true是否启用清除控件-
readOnlyboolean否false是否只读-
textAlignstring否left输入框内容对齐方式，可选值为 left right-
errorboolean否false是否将输入内容标红-
errorMessagestring否-底部错误提示文案，为空时不展示-
autofocusboolean否false获取焦点-
confirmTypestring否done设置键盘右下角按钮的文字，仅在 type='text'时生效-
extStylestring | Record<string, string>否-根节点样式-
ellipsisLinenumber否0左侧文字缺省的行数-

事件 Events​

名称参数列表描述备注
onInput(e: CustomEvent<{value: number | string, keyCode: string}>) => void键盘输入时触发-
onFocus(e: CustomEvent<{value: number | string}>) => void输入框聚焦时触发-
onBlur(e: CustomEvent<{value: number | string}>) => void输入框失去焦点时触发-
onConfirm(e: CustomEvent<{value: number | string}>) => void点击完成按钮时触发-
onClear(e: CustomEvent) => void点击清除图标是触发-
onChange(e: CustomEvent<{value: number | string}>) => void输入值改变时触发-

插槽 Slots​

名称说明备注
prefixIconlabel 左侧图标-
prefix输入框左侧侧插槽-
suffix输入框右侧插槽-

外部样式类 External Classes​

名称说明备注
extClass根节点样式类-
labelClass输入框左侧文本样式类-
inputClassinput 样式类-

CSS 变量 CSS Variable​

变量默认值说明备注
--input-line-height42px文字行高-
--input-padding-v32px垂直方向内边距-
--input-padding-h28px水平方向内边距-
--input-font-size28px字体大小-
--input-label-width168px左侧 label，包括间隙。输入框距最左侧宽度-
--input-title-max-width140px左侧文字局域最大宽度-
--input-placeholder-color#9e9e9eplaceholder 颜色-
-input-font-color#212121输入文字颜色-
--input-placeholder-error-color#ff2e2e错误提示下 placeholder 颜色-
--input-widthautoinput容器宽度-
--input-background#fffinput容器背景-