<fusion-wc-textinput> 
安装
npm install @equinor/fusion-wc-textinput
示例使用
<fwc-textinput label='My Label' icon="settings"></fwc-textinput>
属性/属性
| 名称 | 类型 | 说明 |
|---|---|---|
value | string | 输入控制值 . |
type | TextInputType* | 指定要渲染的控制类型的字符串 . |
variant | TextInputVariant** | 要渲染的输入样式变体 . |
label | string | 设置浮动标签值. |
placeholder | string | 设置正在消失的输入占位符 . |
prefix | string | 输入前要显示的前缀文本 . |
suffix | string | 输入后要显示的后缀文本 . |
icon | IconName*** | 引导图标在输入中显示 。 见 fwc-icon。 。 。 . |
iconTrailing | IconName*** | 要在输入中显示的跟踪图标 。 见 fwc-icon。 。 。 . |
disabled | boolean | 是否应该禁用输入 . |
charCounter | 布尔 | 文本输入 |
helper | string | 输入下面显示的帮助文本 。 仅在焦点时显示默认值 . |
helperPersistent | boolean | 总是显示帮助文本, 尽管焦点 . |
required | boolean | 如果值为空而输入模糊,则显示出错状态. |
maxLength | number | 接受输入的最大长度 . |
validationMessage | string | 当文本输入无效时, 要在错误颜色中显示的信件 。 (帮助文本不可见) |
pattern | string | HTMLInputElement.prototype.pattern (空字符串将取消设置属性) |
min | number|string | HTMLInputElement.prototype.min (空字符串将取消设置属性) |
max | number|string | HTMLInputElement.prototype.max (空字符串将取消设置属性) |
size | number|null | HTMLInputElement.prototype.size (无效将取消设置属性) |
step | number|null | HTMLInputElement.prototype.step (无效将取消设置属性) |
autoValidate | boolean | 报告价值变化的有效性,而不仅仅是模糊性. |
validity | ValidityState (只读) | 这个 ValidityState 文本输入. |
willValidate | boolean (只读) | HTMLInputElement.prototype.willValidate |
validityTransform | ValidityTransform*****|null | 在每个验证检查前调用回话 。 见 审定部分 更多细节. |
validateOnInitialRender | boolean | 运行初始渲染的验证检查 . |
name | string | 设置 name 属性在内部输入上。*** |
* 联合国 TextInputType 导出于 fwc-textinput。 。 。 .
type TextInputType = 'text'|'search'|'tel'|'url'|'email'|'password'|
'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';
页:1 TextInputVariant 导出于 fwc-textinput。 。 。 .
export type TextInputVariant = 'filled' | 'outlined';
页:1 IconName 导出于 fwc-icon。 。 。 .
type IconName = keyof typeof edsIcons | string;
页:1 TextInputCharCounter 导出于 fwc-textinput。 。 。 .
type TextInputCharCounter = 'external' | 'internal';
页:1 ValidityTransform 导出于 fwc-textinput。 。 。 .
type ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial<ValidityState>
****** 这个 name 属性只应用于浏览器自动填充,因为网络组件形式参与目前不考虑 name 属性。 见 289号。 。 。 .
方法
| 名称 | 说明 |
|---|---|
checkValidity() => boolean | 回返 true 如果文字输入通过有效性检查。 回返 false 并发射 invalid 文本输入中的其他事件. 注: 当访问任何在文本输入初始启动时检查有效性的属性或函数时,您可能必须等待 <fwc-textinput>.updateComplete。 。 。 . |
reportValidity() => boolean | 运行 checkValidity() 方法,如果返回虚假,则向用户报告输入无效. |
setCustomValidity(message:string) => void | 设置自定义有效性消息( 另覆盖) validationMessage) (中文(简体) ). 如果此信件不是空字符串, 那么元素会遇到自定义有效性错误, 而不会验证 . |
layout() => Promise<void> | 重新计算布局. 如果文本输入的样式为 display:none 在它被首次制造之前 它的标签是浮起的 然后你必须呼叫 layout() 第一次删除 display:none,否则标签周围的标记将无法正确渲染. |
验证
<fwc-textinput> 遵循基础 <input> 约束验证模型。 。 。 .
它揭露:
requiredmaxLengthpatternminmaxstepvaliditywillValidatecheckValidity()reportValidity()setCustomValidity(message)
此外,它执行更多的特征,例如:
validationMessagevalidateOnInitialRender- 财务报告和审定财务报表
validityTransform
默认, <fwc-textinput> 将报告验证 blur。 。 。 .