For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/components/index.md.

组件总览

浏览常用界面与表单组件,查看交互示例、用法与 API。

布局

数据展示

通用

导航

数据录入

Input 输入框

输入单行文本。

InputNumber 数字输入框

填写数量、金额等数字。

Textarea 文本域

填写多行内容。

Checkbox 复选框

勾选一个或多个选项。

Radio 单选框

从一组中选择一项。

Switch 开关

即时开启或关闭设置。

Select 选择器

从下拉列表中选择。

AutoComplete 自动完成

根据建议完成输入。

Cascader 级联选择

逐级选择地区或分类。

Form 表单

组织字段与校验反馈。

Slider 滑动输入条

通过滑动选择数值或区间。

Rate 评分

选择或展示评分。

TreeSelect 树选择器

从层级数据中选择值。

ColorPicker 颜色选择器

选择颜色与透明度。

Transfer 穿梭框

在两个列表之间选择和移动项目。

InputOTP 验证码输入

输入和粘贴验证码。

InputMask 格式输入

按照指定格式填写信息。

Upload 文件上传

选择或拖拽文件并上传。

Mentions 提及

在文本中插入成员或内容引用。

日期与时间

反馈与交互

Dropdown 下拉菜单

在菜单中收纳操作。

Modal 弹窗

在弹窗中查看或编辑。

Drawer 抽屉

从页面边缘展开内容。

Confirm 确认框

执行重要操作前确认。

Alert 警告提示

提示需关注的信息。

Message 消息提示

短暂反馈操作结果。

Loading 加载

提示内容正在加载。

Progress 进度条

展示任务完成程度。

Tooltip 文字提示

补充简短说明。

Result 结果

展示操作结果与空数据状态。

Skeleton 骨架屏

在内容加载时展示结构占位。

Popover 气泡卡片

在元素附近展示说明或补充操作。

Notification 通知提醒

在页面角落展示通知与后续操作。

Popconfirm 气泡确认

在操作位置附近确认重要操作。

ErrorBoundary 错误边界

展示内容异常时的备用界面。

LoadingBar 顶部加载条

展示页面或任务的加载进度。

Tour 引导

分步骤介绍页面上的功能。

配置

媒体