87 lines
9.7 KiB
Markdown
87 lines
9.7 KiB
Markdown
# Vant 组件文档总览
|
|
|
|
| 组件名称 | 简要说明 | 文件位置 |
|
|
|----------|----------|----------|
|
|
| ActionBar 动作栏 | 用于为页面相关操作提供便捷交互。 | action-bar.md |
|
|
| ActionSheet 动作面板 | 底部弹起的模态面板，包含与当前情境相关的多个选项。 | action-sheet.md |
|
|
| AddressEdit 地址编辑 | 地址编辑组件，用于新建、更新、删除地址信息。 | address-edit.md |
|
|
| AddressList 地址列表 | 展示地址信息列表。 | address-list.md |
|
|
| Area 省市区选择 | 省市区三级联动选择，通常与[弹出层](#/zh-CN/popup)组件配合使用。 | area.md |
|
|
| BackTop 回到顶部 | 返回页面顶部的操作按钮。 | back-top.md |
|
|
| Badge 徽标 | 在右上角展示徽标数字或小红点。 | badge.md |
|
|
| Barrage 弹幕 | 实现观看视频时弹出的评论性字幕功能。请升级 `vant` 到 >= 4.4.0 版本来使用该组件。 | barrage.md |
|
|
| Button 按钮 | 按钮用于触发一个操作，如提交表单。 | button.md |
|
|
| Calendar 日历 | 日历组件用于选择日期或日期区间。 | calendar.md |
|
|
| Card 卡片 | 商品卡片，用于展示商品的图片、价格等信息。 | card.md |
|
|
| Cascader 级联选择 | 级联选择框，用于多层级数据的选择，典型场景为省市区选择。 | cascader.md |
|
|
| Cell 单元格 | 单元格为列表中的单个展示项。 | cell.md |
|
|
| Checkbox 复选框 | 在一组备选项中进行多选。 | checkbox.md |
|
|
| Circle 环形进度条 | 圆环形的进度条组件，支持进度渐变动画。 | circle.md |
|
|
| Layout 布局 | Layout 提供了 `van-row` 和 `van-col` 两个组件来进行行列布局。 | col.md |
|
|
| Collapse 折叠面板 | 将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容。 | collapse.md |
|
|
| ConfigProvider 全局配置 | 用于全局配置 Vant 组件，提供深色模式、主题定制等能力。 | config-provider.md |
|
|
| ContactCard 联系人卡片 | 以卡片的形式展示联系人信息。 | contact-card.md |
|
|
| ContactEdit 联系人编辑 | 编辑并保存联系人信息。 | contact-edit.md |
|
|
| ContactList 联系人列表 | 展示联系人列表。 | contact-list.md |
|
|
| CountDown 倒计时 | 用于实时展示倒计时数值，支持毫秒精度。 | count-down.md |
|
|
| Coupon 优惠券选择器 | 用于优惠券的兑换和选择。 | coupon-list.md |
|
|
| DatePicker 日期选择 | 日期选择器，用于选择年、月、日，通常与[弹出层](#/zh-CN/popup)组件配合使用。 | date-picker.md |
|
|
| Dialog 弹出框 | 弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作。支持组件调用和函数调用两种方式。 | dialog.md |
|
|
| Divider 分割线 | 用于将内容分隔为多个区域。 | divider.md |
|
|
| DropdownMenu 下拉菜单 | 向下弹出的菜单列表。 | dropdown-menu.md |
|
|
| Empty 空状态 | 空状态时的占位提示。 | empty.md |
|
|
| Field 输入框 | 用户可以在文本框内输入或编辑文字。 | field.md |
|
|
| FloatingBubble 浮动气泡 | 悬浮在页面边缘的可点击气泡。请升级 `vant` 到 >= 4.6.0 版本来使用该组件。 | floating-bubble.md |
|
|
| FloatingPanel 浮动面板 | 浮动在页面底部的面板，可以上下拖动来浏览内容，常用于提供额外的功能或信息。请升级 `vant` 到 >= 4.5.0 版本来使用该组件。 | floating-panel.md |
|
|
| Form 表单 | 用于数据录入、校验，支持输入框、单选框、复选框、文件上传等类型，需要与 [Field 输入框](#/zh-CN/field) 组件搭配使用。 | form.md |
|
|
| Grid 宫格 | 宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。 | grid.md |
|
|
| Highlight 高亮文本 | 高亮指定文本内容。请升级 `vant` 到 >= 4.8.0 版本来使用该组件。 | highlight.md |
|
|
| Icon 图标 | 基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过 `icon` 属性引用。 | icon.md |
|
|
| ImagePreview 图片预览 | 图片放大预览，支持组件调用和函数调用两种方式。 | image-preview.md |
|
|
| Image 图片 | 增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示。 | image.md |
|
|
| IndexBar 索引栏 | 用于列表的索引分类显示和快速定位。 | index-bar.md |
|
|
| Lazyload 懒加载 | 当页面需要加载大量内容时，使用懒加载可以实现延迟加载页面可视区域外的内容，从而使页面加载更流畅。 | lazyload.md |
|
|
| List 列表 | 瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。 | list.md |
|
|
| Loading 加载 | 加载图标，用于表示加载中的过渡状态。 | loading.md |
|
|
| 国际化 | Vant 采用中文作为默认语言，同时支持多语言切换，请按照下方教程进行国际化设置。 | locale.md |
|
|
| NavBar 导航栏 | 为页面提供导航功能，常用于页面顶部。 | nav-bar.md |
|
|
| NoticeBar 通知栏 | 用于循环播放展示一组消息通知。 | notice-bar.md |
|
|
| Notify 消息提示 | 在页面顶部展示消息提示，支持组件调用和函数调用两种方式。 | notify.md |
|
|
| NumberKeyboard 数字键盘 | 虚拟数字键盘，可以配合[密码输入框组件](#/zh-CN/password-input)或自定义的输入框组件使用。 | number-keyboard.md |
|
|
| Overlay 遮罩层 | 创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。 | overlay.md |
|
|
| Pagination 分页 | 数据量过多时，采用分页的形式将数据分隔，每次只加载一个页面。 | pagination.md |
|
|
| PasswordInput 密码输入框 | 带网格的输入框组件，可以用于输入密码、短信验证码等场景，通常与[数字键盘](#/zh-CN/number-keyboard)组件配合使用。 | password-input.md |
|
|
| PickerGroup 选择器组 | 用于结合多个 Picker 选择器组件，在一次交互中完成多个值的选择。 | picker-group.md |
|
|
| Picker 选择器 | 提供多个选项集合供用户选择，支持单列选择、多列选择和级联选择，通常与[弹出层](#/zh-CN/popup)组件配合使用。 | picker.md |
|
|
| Popover 气泡弹出框 | 弹出式的气泡菜单。 | popover.md |
|
|
| Popup 弹出层 | 弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。 | popup.md |
|
|
| Progress 进度条 | 用于展示操作的当前进度。 | progress.md |
|
|
| PullRefresh 下拉刷新 | 用于提供下拉刷新的交互操作。 | pull-refresh.md |
|
|
| Radio 单选框 | 在一组备选项中进行单选。 | radio.md |
|
|
| Rate 评分 | 用于对事物进行评级操作。 | rate.md |
|
|
| RollingText 翻滚文本 | 文本翻滚动效，可以翻滚数字和其他类型文本。请升级 `vant` 到 >= 4.6.0 版本来使用该组件。 | rolling-text.md |
|
|
| Search 搜索 | 用于搜索场景的输入框组件。 | search.md |
|
|
| ShareSheet 分享面板 | 底部弹起的分享面板，用于展示各分享渠道对应的操作按钮，不含具体的分享逻辑。 | share-sheet.md |
|
|
| Sidebar 侧边导航 | 垂直展示的导航栏，用于在不同的内容区域之间进行切换。 | sidebar.md |
|
|
| Signature 签名 | 用于签名场景的组件，基于 Canvas 实现。请升级 `vant` 到 >= 4.3.0 版本来使用该组件。 | signature.md |
|
|
| Skeleton 骨架屏 | 用于在内容加载过程中展示一组占位图形。 | skeleton.md |
|
|
| Slider 滑块 | 滑动输入条，用于在给定的范围内选择一个值。 | slider.md |
|
|
| Space 间距 | 设置元素之间的间距。 | space.md |
|
|
| Stepper 步进器 | 步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字。 | stepper.md |
|
|
| Steps 步骤条 | 用于展示操作流程的各个环节，让用户了解当前的操作在整体流程中的位置。 | steps.md |
|
|
| Sticky 粘性布局 | Sticky 组件与 CSS 中 `position: sticky` 属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。 | sticky.md |
|
|
| 内置样式 | Vant 中默认包含了一些常用样式，可以直接通过 className 的方式使用。 | style.md |
|
|
| SubmitBar 提交订单栏 | 用于展示订单金额与提交订单。 | submit-bar.md |
|
|
| SwipeCell 滑动单元格 | 可以左右滑动来展示操作按钮的单元格组件。 | swipe-cell.md |
|
|
| Swipe 轮播 | 用于循环播放一组图片或内容。 | swipe.md |
|
|
| Switch 开关 | 用于在打开和关闭状态之间进行切换。 | switch.md |
|
|
| Tab 标签页 | 选项卡组件，用于在不同的内容区域之间进行切换。 | tab.md |
|
|
| Tabbar 标签栏 | 底部导航栏，用于在不同页面之间进行切换。 | tabbar.md |
|
|
| Tag 标签 | 用于标记关键词和概括主要内容。 | tag.md |
|
|
| TextEllipsis 文本省略 | 对长文本进行省略，支持展开/收起。请升级 `vant` 到 >= 4.1.0 版本来使用该组件。 | text-ellipsis.md |
|
|
| TimePicker 时间选择 | 时间选择器，通常与[弹出层](#/zh-CN/popup)组件配合使用。 | time-picker.md |
|
|
| Toast 轻提示 | 在页面中间弹出黑色半透明提示，用于消息通知、加载提示、操作结果提示等场景。 | toast.md |
|
|
| TreeSelect 分类选择 | 用于从一组相关联的数据集合中进行选择。 | tree-select.md |
|
|
| Uploader 文件上传 | 用于将本地的图片或文件上传至服务器，并在上传过程中展示预览图和上传进度。目前 Uploader 组件不包含将文件上传至服务器的接口逻辑，该步骤需要自行实现。 | uploader.md |
|
|
| Watermark 水印 | 在页面上添加特定的文字或图案作为水印，可用于防止信息盗用。请升级 `vant` 到 >= 4.2.0 版本来使用该组件。 | watermark.md |
|