跳到主要内容

Ant Design 直通组件

@vef-framework-react/components 直接重新导出了大部分 Ant Design 组件。这些组件不携带任何 VEF 专属行为或属性变更——从 @vef-framework-react/components 导入它们,并完全按照 Ant Design 官网文档使用即可。

在拥有独立文档页面的组件中,Modal(新增 draggable)、Table(新增 flexHeight/striped)和 Upload(新增 enableCrop/pastable)真正扩展了 antd。ButtonInputAlertAvatarTypographyCompactBorderBeam 同样是 antd 的原样重新导出——它们拥有独立页面只是为了便于查找,而不是因为 VEF 改变了它们的行为。下表中的 Empty 也并非未经修改的直通组件:VEF 将其默认 image 覆盖为了 antd 的 PRESENTED_IMAGE_SIMPLE。对于真正获得了 VEF 专属属性、hook 或行为的组件,或 VEF 原创组件,请参见组件概览

import { Affix, Card, Tabs, Tag } from '@vef-framework-react/components';
组件说明Ant Design 文档
Affix将元素固定在视口中。Affix
Anchor指向页面内区块的超链接导航。Anchor
AutoComplete带自动完成建议的输入框。AutoComplete
Badge在元素上显示数量或状态。Badge
Breadcrumb显示当前页面在层级结构中的位置。Breadcrumb
Calendar以日历形式展示日期。Calendar
Card用于组织相关内容的容器。Card
Carousel循环轮播元素的幻灯片。Carousel
Cascader从层级选项列表中选择。Cascader
Checkbox用于多选的复选框。Checkbox
Col栅格列容器。Col
Collapse可折叠的内容区块。Collapse
ColorPicker颜色选择输入框。ColorPicker
DatePicker选择日期或日期范围。DatePicker
Descriptions以分组形式展示多个只读字段。Descriptions
Divider内容之间的视觉分割线。Divider
Drawer从屏幕边缘滑出的面板。Drawer
Dropdown由按钮触发的下拉菜单。Dropdown
Empty空状态占位;VEF 将 image 预设为 PRESENTED_IMAGE_SIMPLEEmpty
Flexflex 布局容器。Flex
FloatButton悬浮操作按钮。FloatButton
Image支持预览的图片。Image
InputNumber数字输入框。InputNumber
List展示条目列表。List
Mentions在文本输入中提及某人。Mentions
Menu用于页面路由的导航菜单。Menu
Pagination用于长列表的分页控件。Pagination
Popconfirm元素上的确认气泡框。Popconfirm
Popover点击触发的浮动卡片。Popover
Progress展示操作的当前进度。Progress
QRCode生成二维码。QRCode
Radio从一组选项中选择单个选项。Radio
Rate星级评分组件。Rate
Result展示操作结果。Result
Row栅格行容器。Row
Segmented用于切换视图的分段控制器。Segmented
Skeleton内容加载时的占位骨架。Skeleton
Slider在范围内选择数值的滑动条。Slider
Space设置组件之间的间距。Space
Spin加载中的旋转指示器。Spin
Splitter可调整大小的分栏面板。Splitter
Statistic展示统计数值。Statistic
Steps分步进度指示器。Steps
Switch切换开关。Switch
Tabs将内容组织为标签页区块。Tabs
Tag用于内容分类的标签。Tag
TimePicker选择时间值。TimePicker
Timeline按时间顺序展示事件列表。Timeline
Tooltip悬停时显示的简单文字提示。Tooltip
Tour对界面元素的引导浏览。Tour
Transfer在两个列表之间移动条目。Transfer
Watermark为容器添加水印。Watermark