折旧
此组件已移至 anypoint-web-components/awc。 。 。 .
本部分以"材料设计"文字字段为基础,并被调整为"任意点"平台组件.
任意点网络组件是允许在开源项目中构建任意点启用的UI的组件集.
文本字段允许用户输入一个值入UI. 它可以出现在一个 form 或对话.
样式选项
该元素有三个内在主题:
- 材料设计 - 已填充
- 材料设计 - 外观
- 任意点设计 - 兼容性
默认输入生成 filled 输入.
当 outlined 属性设置.
当 compatibility 属性设置.
OSS应用程序不应使用基于任意点的造型,因为它受到MuleSoft版权的保护. 此属性被保留给嵌入Anypoint平台的OSS应用程序.
使用量
安装
npm install --save @anypoint-web-components/anypoint-input
在 HTML 文件内
<html>
<head>
<script type="module">
import '@anypoint-web-components/anypoint-input/anypoint-input.js';
</script>
</head>
<body>
<anypoint-input value="My awesome API">
<label slot="label">API title</label>
</anypoint-input>
</body>
</html>
前缀和后缀
该元素允许在文本输入之前或之后但输入边框内渲染一个部件 .
当它有意义前缀或后缀可以用来建议正确的输入. 以现金金额表示的 Fox 示例 字段输入前缀可以是 $ 表示数值以美元解释.
<anypoint-input name="ex1">
<label slot="label">Amount to transfer</label>
<span slot="prefix" aria-label="Value in US dollars">$</span>
</anypoint-input>
同样后缀可以提供附加信息,说明输入的格式. 对于相同的现金数额,输入后缀可以 .00 表示输入是整数.
<anypoint-input name="ex2">
<label slot="label">Amount to transfer</label>
<span slot="suffix" aria-label="Use integers">.00</span>
</anypoint-input>
后缀也可以是活动部件. 它可以是切换密码能见度的图标按钮. 只要记住,添加交互式后缀并不是一个常见的设计模式,你的后缀必须对用户有明确的含义.
<anypoint-input type="password" name="ex3">
<label slot="label">Password</label>
<anypoint-button slot="suffix" aria-label="Activate the button to show the password" onclick="this.parentNode.type='text'">Show</anypoint-button>
</anypoint-input>
<anypoint-input type="email" name="ex4">
<label slot="label">Email</label>
<div slot="suffix">@mulesoft.com</div>
</anypoint-input>
验证
该元素支持所有帮助验证的输入属性, 如 required, (中文(简体) ), min, (中文(简体) ), max, (中文(简体) ), pattern,等等。 (笑声) 它还支持 autoValidate 当值变化时验证输入的属性.
<anypoint-input required autovalidate pattern="[a-z]*" invalidMessage="Only letters allowed">
<label slot="label">Enter text</label>
</anypoint-input>
当它无效时, 错误消息被定义为 invalidmessage 属性.
这个要素还有: preventInvalidInput 财务报告和审定财务报表 allowedPattern 属性,当两者同时设置时,取消任何不匹配的输入 allowedPattern。 。 。 .
记住要小心使用这些属性,因为这是一种非常侵入性的行为.
<anypoint-input allowedPattern="[a-z]*" preventInvalidInput>
<label slot="label">Enter text</label>
</anypoint-input>
辅助文本
辅助文本可以让用户更好地了解需要什么样的输入. 无效时可以是信息消息或无效消息 已检测到输入 .
信息消息
信息信息为用户提供了额外的字段描述. 当标签可能混淆或确保用户了解收集输入的原因时,应当使用.
<anypoint-input infoMessage="Used to confirm your order." type="email" name="ex5">
<label slot="label">Email</label>
</anypoint-input>
不要试图提供过于详细的信息。 用户应当能够以一秒之差扫描消息. 将其作为标签的附加文本.
无效的消息
出错消息应当帮助用户从出错状态中恢复. 使用清晰的信息, 并简单说明如何解决问题, 例如 Only letters are allowed。 。 。 .
<anypoint-input invalidmessage="Only letters are allowed" type="text" name="ex6" invalid>
<label slot="label">Username</label>
</anypoint-input>
形式相关自定义要素
这个 窗体关联自定义元素 允许将自定义元素与 <form> 键。 原始自定义元素 spec 不允许这样做 .
某些浏览器可能不支持与窗体相关的自定义元素,因此可能需要使用自定义形式元素(例如: 铁制) (中文(简体) ).
该元素支持在浏览器中执行此API的API. 这意味着元素的行为像常客 <input> 元素插入窗体元素时.
无障碍
元素已经准备好了.
加入: name 属性到输入,然后作为孩子添加标签.
当使用前缀或后缀时,通过使用 aria-label 属性。 注,通过设置 aria-label,屏幕读取器将跳过该元素的文本值.
<anypoint-input name="amount-usd">
<label slot="label">Amount to transfer</label>
<span slot="prefix" aria-label="Value in US dollars">$</span>
</anypoint-input>
发展
git clone https://github.com/anypoint-web-components/anypoint-input
cd anypoint-input
npm install
本地运行演示
npm start
运行测试
npm test