组件目录
先想清楚正在解决什么问题,再挑组件。这里按操作、表单、反馈、浮层和数据等任务分类, 每一项都能直接打开、试用并查看代码。
65 / 65 components
操作
5 个组件表单
23 个组件- 01Input 输入框录入单行文本、邮箱、搜索词等符合原生输入语义的值。
- 02Textarea 文本域录入备注、描述或反馈等需要换行的较长自由文本。
- 03Label 标签为表单控件提供可点击且可访问的明确文字名称。
- 04Field 表单字段把标签、表单控件、帮助文字与错误消息关联为完整字段。
- 05Checkbox 复选框让用户独立选择一个布尔选项,并支持部分选中的三态表达。
- 06Radio Group 单选组在一组互斥选项中选择且始终只保留一个当前值。
- 07Switch 开关立即开启或关闭一个持久设置,并清楚反映当前状态。
- 08Slider 滑块沿连续范围调整一个或两个数值,并提供键盘精确控制。
- 09Select 选择器从有限候选列表中选择一个值,并在触发器中显示当前结果。
- 10Form 表单承载原生表单提交与校验事件,并统一表单字段的布局节奏。
- 11Combobox 组合框结合文本搜索与单项选择,从较长候选列表中快速定位值。
- 12MultiSelect 多选器从可搜索候选列表中选择多个值,并以可移除标签展示结果。
- 13TagsInput 标签输入通过文本输入创建多个短标签,并支持逐项删除与数量限制。
- 14NumberInput 数字输入框输入数值并通过递增、递减按钮按合法步长调整结果。
- 15PasswordInput 密码输入框安全录入口令,并提供带可访问名称的显示与隐藏切换。
- 16OTPInput 验证码输入按固定长度分格录入一次性验证码,并支持连续输入与粘贴。
- 17Calendar 日历在月历网格中浏览并选择单个日期或连续日期范围。
- 18DatePicker 日期选择器通过输入触发器与弹出月历选择一个不含时区的日期。
- 19DateRangePicker 日期范围选择器在同一个弹出月历中选择并展示开始与结束日期范围。
- 20TimePicker 时间选择器使用原生时间输入选择不带日期和时区的时分值。
- 21FileUpload 文件上传选择或拖放本地文件,并展示队列、进度、错误与移除操作。
- 22TreeSelect 树选择器从可展开层级树中选择一个节点,并在紧凑触发器中显示结果。
- 23Cascader 级联选择按列逐级选择具有明确父子关系的分类或区域路径。
展示
6 个组件反馈
7 个组件浮层
9 个组件- 01Tooltip 工具提示在悬停或聚焦紧凑控件时补充简短、非关键的文字说明。
- 02Popover 弹出层在触发器附近展示可交互的补充内容、筛选器或轻量表单。
- 03Dropdown Menu 下拉菜单从一个可见触发器展开一组紧凑命令、选择项或子菜单。
- 04Context Menu 上下文菜单根据当前目标的上下文,在右键或菜单键处提供相关快捷操作。
- 05Hover Card 悬停卡片在鼠标悬停或键盘聚焦链接时预览实体的补充信息。
- 06Dialog 对话框在当前页面之上承载需要聚焦处理的表单、详情或短流程。
- 07Alert Dialog 警告对话框在继续危险或不可逆操作前,要求用户明确理解并确认后果。
- 08Drawer 抽屉从屏幕底部拉起适合触屏操作的补充任务或详情面板。
- 09Sheet 侧边面板从屏幕边缘滑入较宽的任务面板,同时保留主页面背景语境。