TextField

用户的输入框,输入一些内容用来提交给服务器。

使用

  1. <m-text-field label='Label' helper-text='helper text' ></m-text-field>
  2. <m-text-field
  3. helper-text='Helper Text'
  4. icon-right
  5. path='M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z'
  6. label='Label2'
  7. css='
  8. .mdc-text-field {
  9. width:200px;
  10. }
  11. '
  12. ></m-text-field>

Omi 中使用

JSX:

  1. <m-text-field label='Label1' helperText='Helper Text' />
  2. <m-text-field
  3. helperText='Helper Text'
  4. iconRight
  5. path='M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z'
  6. label='Label2'
  7. css={`
  8. .mdc-text-field {
  9. width:200px;
  10. }
  11. `}
  12. />

API

Props

NameTypeDefaultsDetails
full-widthboolean使用父级元素宽度
textareaboolean多行输入,且可鼠标拖拽设置输入框大小
outlinedboolean给输入框添加边框
no-labelboolean输入框无默认标签
show-helperbooleantrue显示帮助文本
helper-textstring帮助文本
icon-rightboolean图标在右侧
counterboolean记录输入字符个数,配合 min-length, max-length 一起使用
pathstring图标 path
pathsobject多图标 path
labelstring默认标签
requiredboolean检测输入框是否为空
patternstring输入值限制及检测
min-lengthnumber输入字符最小长度,配合 counter 一起使用
max-lengthnumber输入字符最大长度,配合 counter 一起使用
minnumber
maxnumber
stepnumber
rowsnumber多行输入框高度,数值表示n倍行高
colsnumber多行输入框宽度,数值表示n个字符宽度
valuestring默认输入值
disabledboolean输入框失效
icon-eventbooleanicon是否有绑定事件,鼠标形状会变成小手

Events

  • iconclick - 点击 icon 触发