SuperAPI AI 工具集

component-guidance-forms

设计与创作

查看项目

更新于 10-16 03:38

技能介绍

用途:该技能用于表单与数据录入组件的选型指导,回答“某场景该用哪个组件”“相似组件如何取舍”“何时不应使用某组件”等问题,并给出最佳实践。覆盖组件包括 Checkbox、Combobox Input、Date Picker、Fieldset、File Uploader、Form Grid、Form Group、Form Header、Form Item、Form Label、Form Message、Input、Input Group、Multi ComboBox、Multi Input、Radio、Select、Slider、Step Input、Switch、Textarea、Time、Time Picker、Token、Tokenizer、Upload Collection。

主要能力:针对每组组件给出描述、适用场景、应避免的用法和最佳实践,例如 Checkbox 用于独立多选及三态(由 JavaScript indeterminate 属性设置,仅视觉、无法直接交互达成);Combobox Input 用于长列表单选并可输入过滤,超过 200 项建议改用对话框选择;Date Picker 用于单个本地化日期输入,含输入框与日/月/年/年区间视图,支持紧凑与舒适模式;Fieldset 用于语义化分组,复选框组与单选按钮组必须使用以保证无障碍;File Uploader 适合单文件上传且选中即自动上传,多文件管理应改用 Upload Collection;Form Grid 基于 12 列与四个断点(Small <600px、Medium 601-1024px、Large 1025-1440px、Extra-large >1441px)做响应式布局,断点取决于表单宽度而非屏幕宽度,并可按 X:Y:Z 配置标签-字段-空列比例(如 2:10:0、4:7:1、3:5:4);Form Item 组合标签与输入,必填需 fd-form-label--required 修饰类并设置 aria-required="true";Form Label 支持 fd-form-label--required、fd-form-label--colon、fd-form-label--disabled;Form Message 与输入值状态类 is-success、is-error、is-warning、is-information 及对应 fd-form-message--success 等修饰符配合,在输入获得焦点时显示。

使用方式与限制:作为组件选型与规范参考使用;具体安装命令、API 细节、组件版本与平台支持范围暂未提供。以上内容依据公开资料整理。