Ant Design 直通组件
@vef-framework-react/components 直接重新导出了大部分 Ant Design 组件。这些组件不携带任何 VEF 专属行为或属性变更——从 @vef-framework-react/components 导入它们,并完全按照 Ant Design 官网文档使用即可。
在拥有独立文档页面的组件中,
Modal(新增draggable)、Table(新增flexHeight/striped)和Upload(新增enableCrop/pastable)真正扩展了 antd。Button、Input、Alert、Avatar、Typography、Compact和BorderBeam同样是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_SIMPLE。 | Empty |
Flex | flex 布局容器。 | 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 |