Ant Design React 组件库使用指南 - 快速构建企业级React应用UI | SkillsMDAnt Design React 组件库使用指南 - 快速构建企业级React应用UI
ant-design-react by teachingai/full-stack-skills
npx skills add https://github.com/teachingai/full-stack-skills --skill ant-design-react🇨🇳中文介绍
何时使用此技能
当用户想要以下操作时，请使用此技能：
- 使用 Ant Design 组件构建 React 应用程序
- 使用 Ant Design UI 组件（Button、Form、Table、Input、Select 等）
- 自定义 Ant Design 主题和样式
- 使用 Ant Design 实现国际化（i18n）
- 在 TypeScript 中使用 Ant Design
- 创建带验证的表单
- 在表格和列表中显示数据
- 实现导航和布局
- 使用 Ant Design 图标
- 处理用户反馈（Modal、Message、Notification）
- 实现数据可视化组件
- 使用 Ant Design 设计令牌和设计系统
如何使用此技能
此技能的组织结构与 Ant Design React 官方文档结构（https://6x-ant-design.antgroup.com/docs/react/introduce-cn，https://6x-ant-design.antgroup.com/components/overview-cn/）相匹配。在使用 Ant Design React 时：
-
从用户请求中识别主题：
- 快速开始 →
examples/getting-started/installation.md 或 examples/getting-started/basic-usage.md
- 按钮 →
examples/components/button.md
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
examples/components/form.md表格 → examples/components/table.md输入框 → examples/components/input.md选择器 → examples/components/select.md日期选择器 → examples/components/date-picker.md对话框 → examples/components/modal.md布局 → examples/components/layout.md菜单 → examples/components/menu.md主题定制 → examples/advanced/theme-customization.md国际化 → examples/advanced/internationalization.md类型支持 → examples/advanced/typescript.md
从 examples/ 目录加载相应的示例文件：
快速开始 - examples/getting-started/：
examples/getting-started/installation.md - 安装 Ant Design 和基本设置examples/getting-started/basic-usage.md - 基本组件用法
组件 - examples/components/：
examples/components/button.md - Button 组件examples/components/input.md - Input 组件examples/components/form.md - 带验证的 Form 组件examples/components/table.md - Table 组件examples/components/select.md - Select 组件examples/components/date-picker.md - DatePicker 组件examples/components/modal.md - Modal 组件examples/components/layout.md - Layout 组件examples/components/menu.md - Menu 组件examples/components/icon.md - Icon 组件examples/components/typography.md - Typography 组件examples/components/grid.md - Grid 组件examples/components/space.md - Space 组件examples/components/card.md - Card 组件examples/components/tabs.md - Tabs 组件examples/components/pagination.md - Pagination 组件examples/components/upload.md - Upload 组件examples/components/upload.md - Upload 组件examples/components/message.md - Message 组件examples/components/notification.md - Notification 组件examples/components/alert.md - Alert 组件examples/components/spin.md - Spin 组件examples/components/progress.md - Progress 组件
高级 - examples/advanced/：
examples/advanced/theme-customization.md - 自定义主题examples/advanced/internationalization.md - 国际化设置examples/advanced/typescript.md - TypeScript 支持
遵循该示例文件中的具体说明，包括语法、结构和最佳实践。
重要提示：
- 所有示例遵循 Ant Design React 4.x API
- 示例在适用时包含 JavaScript 和 TypeScript 版本
- 每个示例文件都包含关键概念、代码示例和要点
- 始终检查示例文件以获取最佳实践和常见模式
需要时参考 api/ 目录中的 API 文档：
api/components.md - 组件 API 参考api/config-provider.md - ConfigProvider APIapi/design-tokens.md - 设计令牌 API
使用 templates/ 目录中的模板：
templates/project-setup.md - 项目设置模板templates/component-template.md - 组件使用模板
文档映射（与官方文档一一对应）
示例和模板
此技能包含详细的示例，其组织方式与官方文档结构相匹配。所有示例都在 examples/ 目录中（参见上面的映射）。
- 从用户请求中识别主题
- 根据上面的映射加载相应的示例文件
- 遵循该文件中的说明、语法和最佳实践
- 根据您的具体用例调整代码示例
- 参考
templates/ 目录中的模板以获取常见脚手架
- 根据您的具体需求和编码风格调整模板
API 参考
详细的 API 文档可在 api/ 目录中找到，其组织方式与官方 Ant Design React API 文档结构相匹配：
组件 API (api/components.md)
- 所有组件属性和 API
- 组件方法和事件
- 组件类型和接口
ConfigProvider API (api/config-provider.md)
- ConfigProvider 组件 API
- 全局配置选项
- 区域设置配置
设计令牌 API (api/design-tokens.md)
- 确定您需要帮助的 API
- 从
api/ 目录加载相应的 API 文件
- 查找 API 签名、参数、返回类型和示例
- 参考链接的示例文件以获取详细的使用模式
- 所有 API 文件都包含指向
examples/ 目录中相关示例文件的链接
最佳实践
- 导入样式：在入口文件中导入 Ant Design CSS
- 使用 ConfigProvider：使用 ConfigProvider 包装您的应用以进行全局配置
- 表单验证：使用带有验证规则的 Form 组件
- TypeScript：使用 TypeScript 以获得更好的类型安全性
- 主题定制：使用设计令牌实现一致的主题
- 国际化：将 ConfigProvider 与区域设置一起用于 i18n
- 组件组合：组合组件以构建复杂的 UI
- 性能：使用 React.memo 和 useMemo 进行优化
- 可访问性：遵循 Ant Design 可访问性指南
- 响应式设计：使用 Grid 和响应式工具
资源
关键词
Ant Design, Ant Design React, antd, React UI library, components, Button, Form, Table, Input, Select, DatePicker, Modal, Layout, Menu, theme, customization, internationalization, i18n, TypeScript, design system, 组件库, 按钮, 表单, 表格, 输入框, 选择器, 日期选择器, 对话框, 布局, 菜单, 主题, 国际化, 类型支持
React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性
116,600 周安装
