本文从输入框的定义、使用场景、相关组件、交互说明都有详细的分析,作者还附上输入框的源文件供大家参考学习。
往期回顾:
通过鼠标或键盘输入文字、字母、数字、符号内容。
- 填写表单时;
- 需要输入文本数据时。
- 当仅需要输入数字时,使用 InputNumber 数字输入框;
- 当进行搜索时,使用 Search 搜索框;
- 当需要进行包含图片、文本等内容的复杂输入时,使用 RichText 富文本编辑器。
1. CASE1 输入框高度说明
输入框根据行数分为三种类型:单行输入框、定高文本域、自适应高度文本域。
2. CASE2 输入框宽度说明
- 输入框宽度根据实际情况确定,宽度固定无自适应;
- 为方便阅读,不可过宽(具体宽度由 UI 定义)。
3. CASE3 输入内容说明
- 可输入文字、字母、数字、符号;
- 如无特殊说明,不可输入 emoji 表情;
- 如无特殊说明,第一个字符不可为空格或回车;
- 过滤文本样式、链接;
- 输入的内容为保密信息时,显示圆点,不直接显示字符。
4. CASE4 控件状态说明
输入框共分为启用、聚焦、禁用、输入中、加载、报错、符合条件 7 种状态。
5. CASE5 暗提示说明
未输入任何内容时,输入框中需显示暗提示:
6. CASE6 字数限制说明
输入框必须对可输入的字数进行限制,分为以下两种限制方式:
下载链接: https://pan.baidu.com/s/1aq7dc2Iv3qpEF6g2PVF5uA 提取码: ridu
备用下载链接:https://share.weiyun.com/5xrRyZ0
欢迎关注作者的微信公众号:「愚者笔记」
复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。
发评论!每天赢奖品
点击 登录 后,在评论区留言,系统会随机派送奖品
2012年成立至今,是国内备受欢迎的设计师平台,提供奖品赞助 联系我们
AI绘画艺术风格设计
已累计诞生 649 位幸运星
发表评论 已发布2条
↓ 下方为您推荐了一些精彩有趣的文章热评 ↓