> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/components/index.html

> 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.

# 组件总览

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


## 布局

[### Flex 弹性布局

控制内容方向、对齐、间距与换行。

](/leaf-ui/components/flex.html)[### Scrollbar 滚动条

在区域内平滑浏览较长或较宽的内容。

](/leaf-ui/components/scrollbar.html)[### Layout 布局

组织页面的头部、侧栏、内容与底部。

](/leaf-ui/components/layout.html)[### Grid 栅格

根据屏幕宽度排列内容。

](/leaf-ui/components/grid.html)[### Space 间距

统一一组元素之间的间距。

](/leaf-ui/components/space.html)[### ScrollArea 滚动区域

在限定区域内浏览内容。

](/leaf-ui/components/scroll-area.html)[### Masonry 瀑布流

排列高度不一的卡片与图片。

](/leaf-ui/components/masonry.html)[### Splitter 分割面板

调整工作区面板的大小。

](/leaf-ui/components/splitter.html)

## 数据展示

[### DataTable 表格

浏览、筛选和管理结构化数据。

](/leaf-ui/components/table.html)[### Tag 标签

标记分类或状态。

](/leaf-ui/components/tag.html)[### Badge 角标

显示数量和未读提醒。

](/leaf-ui/components/badge.html)[### Avatar 头像

展示用户、团队或对象的头像。

](/leaf-ui/components/avatar.html)[### Card 卡片

在独立容器中展示相关内容和操作，使用 CardTitle 单独复用标题。

](/leaf-ui/components/card.html)[### Collapse 折叠面板

展开或收起一组内容。

](/leaf-ui/components/collapse.html)[### Tree 树

按层级浏览与选择内容。

](/leaf-ui/components/tree.html)[### Descriptions 描述列表

按名称和值展示对象详情。

](/leaf-ui/components/descriptions.html)[### QRCode 二维码

将文本和链接展示为二维码。

](/leaf-ui/components/qr-code.html)[### Timeline 时间线

按顺序展示事件与进展。

](/leaf-ui/components/timeline.html)[### VirtualList 虚拟列表

流畅浏览大量列表内容。

](/leaf-ui/components/virtual-list.html)[### InfiniteScroll 无限滚动

浏览到列表末尾时加载更多内容。

](/leaf-ui/components/infinite-scroll.html)[### Statistic 统计数值

展示指标数值和倒计时。

](/leaf-ui/components/statistic.html)

## 通用

[### Button 按钮

触发保存、提交等操作。

](/leaf-ui/components/button.html)[### Divider 分割线

分隔内容、段落或一组操作。

](/leaf-ui/components/divider.html)[### Typography 排版

组织标题、正文和链接。

](/leaf-ui/components/typography.html)

## 导航

[### Steps 步骤条

查看任务步骤与进度。

](/leaf-ui/components/steps.html)[### Breadcrumb 面包屑

展示页面所在层级。

](/leaf-ui/components/breadcrumb.html)[### Pagination 分页

按页浏览较多数据。

](/leaf-ui/components/pagination.html)[### Tabs 标签页

在同一区域切换内容。

](/leaf-ui/components/tabs.html)[### Menu 菜单

按层级与分组组织页面导航，复用分组标题展示自定义内容。

](/leaf-ui/components/menu.html)[### BackTop 回到顶部

快速返回页面或滚动容器顶部。

](/leaf-ui/components/back-top.html)[### Anchor 锚点与固钉

浏览长页目录并保持重要操作可见。

](/leaf-ui/components/anchor.html)[### FloatButton 悬浮按钮

提供随时可用的快捷操作。

](/leaf-ui/components/float-button.html)[### CommandPalette 命令面板

快速搜索并执行操作。

](/leaf-ui/components/command-palette.html)[### AppBar 应用导航

组织应用顶部和底部的导航。

](/leaf-ui/components/app-bar.html)

## 数据录入

[### Input 输入框

输入单行文本。

](/leaf-ui/components/input.html)[### InputNumber 数字输入框

填写数量、金额等数字。

](/leaf-ui/components/input-number.html)[### Textarea 文本域

填写多行内容。

](/leaf-ui/components/textarea.html)[### Checkbox 复选框

勾选一个或多个选项。

](/leaf-ui/components/checkbox.html)[### Radio 单选框

从一组中选择一项。

](/leaf-ui/components/radio.html)[### Switch 开关

即时开启或关闭设置。

](/leaf-ui/components/switch.html)[### Select 选择器

从下拉列表中选择。

](/leaf-ui/components/select.html)[### AutoComplete 自动完成

根据建议完成输入。

](/leaf-ui/components/auto-complete.html)[### Cascader 级联选择

逐级选择地区或分类。

](/leaf-ui/components/cascader.html)[### Form 表单

组织字段与校验反馈。

](/leaf-ui/components/form.html)[### Slider 滑动输入条

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

](/leaf-ui/components/slider.html)[### Rate 评分

选择或展示评分。

](/leaf-ui/components/rate.html)[### TreeSelect 树选择器

从层级数据中选择值。

](/leaf-ui/components/tree-select.html)[### ColorPicker 颜色选择器

选择颜色与透明度。

](/leaf-ui/components/color-picker.html)[### Transfer 穿梭框

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

](/leaf-ui/components/transfer.html)[### InputOTP 验证码输入

输入和粘贴验证码。

](/leaf-ui/components/input-otp.html)[### InputMask 格式输入

按照指定格式填写信息。

](/leaf-ui/components/input-mask.html)[### Upload 文件上传

选择或拖拽文件并上传。

](/leaf-ui/components/upload.html)[### Mentions 提及

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

](/leaf-ui/components/mentions.html)

## 日期与时间

[### DatePicker 日期选择器

从日历中选择日期。

](/leaf-ui/components/date-picker.html)[### TimePicker 时间选择器

选择小时、分钟和秒。

](/leaf-ui/components/time-picker.html)[### DateTimePicker 日期时间选择器

选择具体的日期与时间。

](/leaf-ui/components/date-time-picker.html)[### DateRangePicker 日期区间选择器

选择起止日期或时间。

](/leaf-ui/components/date-range-picker.html)[### Calendar 日历

浏览日期与日程安排。

](/leaf-ui/components/calendar.html)[### TimeRangePicker 时间范围

选择一天内的起止时间。

](/leaf-ui/components/time-range-picker.html)

## 反馈与交互

[### Dropdown 下拉菜单

在菜单中收纳操作。

](/leaf-ui/components/dropdown.html)[### Modal 弹窗

在弹窗中查看或编辑。

](/leaf-ui/components/modal.html)[### Drawer 抽屉

从页面边缘展开内容。

](/leaf-ui/components/drawer.html)[### Confirm 确认框

执行重要操作前确认。

](/leaf-ui/components/confirm.html)[### Alert 警告提示

提示需关注的信息。

](/leaf-ui/components/alert.html)[### Message 消息提示

短暂反馈操作结果。

](/leaf-ui/components/message.html)[### Loading 加载

提示内容正在加载。

](/leaf-ui/components/loading.html)[### Progress 进度条

展示任务完成程度。

](/leaf-ui/components/progress.html)[### Tooltip 文字提示

补充简短说明。

](/leaf-ui/components/tooltip.html)[### Result 结果

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

](/leaf-ui/components/result.html)[### Skeleton 骨架屏

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

](/leaf-ui/components/skeleton.html)[### Popover 气泡卡片

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

](/leaf-ui/components/popover.html)[### Notification 通知提醒

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

](/leaf-ui/components/notification.html)[### Popconfirm 气泡确认

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

](/leaf-ui/components/popconfirm.html)[### ErrorBoundary 错误边界

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

](/leaf-ui/components/error-boundary.html)[### LoadingBar 顶部加载条

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

](/leaf-ui/components/loading-bar.html)[### Tour 引导

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

](/leaf-ui/components/tour.html)

## 配置

[### ConfigProvider 配置

按区域定制主题与语言。

](/leaf-ui/components/config-provider.html)

## 媒体

[### Image 图片

展示图片并放大浏览图片组。

](/leaf-ui/components/image.html)[### FileList 文件列表

展示文件信息，下载与预览媒体。

](/leaf-ui/components/file-list.html)[### Carousel 轮播

依次浏览图片或内容。

](/leaf-ui/components/carousel.html)