Back to Details

ant-design-react

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

When to use this skill

何时使用本技能

Use this skill whenever the user wants to:
  • Build React applications with Ant Design components
  • Use Ant Design UI components (Button, Form, Table, Input, Select, etc.)
  • Customize Ant Design theme and styles
  • Implement internationalization (i18n) with Ant Design
  • Use Ant Design with TypeScript
  • Create forms with validation
  • Display data in tables and lists
  • Implement navigation and layout
  • Use Ant Design icons
  • Handle user feedback (Modal, Message, Notification)
  • Implement data visualization components
  • Use Ant Design design tokens and design system
当用户有以下需求时，即可使用本技能：
  • 使用Ant Design组件构建React应用
  • 使用Ant Design UI组件（Button、Form、Table、Input、Select等）
  • 自定义Ant Design主题与样式
  • 结合Ant Design实现国际化（i18n）
  • 在Ant Design中使用TypeScript
  • 创建带验证的表单
  • 在表格与列表中展示数据
  • 实现导航与布局
  • 使用Ant Design图标
  • 处理用户反馈（Modal、Message、Notification）
  • 实现数据可视化组件
  • 使用Ant Design设计令牌与设计系统

How to use this skill

如何使用本技能

This skill is organized to match the Ant Design React official documentation structure (https://4x-ant-design.antgroup.com/docs/react/introduce-cn, https://4x-ant-design.antgroup.com/components/overview-cn/). When working with Ant Design React:
  1. Identify the topic from the user's request:
    • Getting started/快速开始 → 
      examples/getting-started/installation.md
      or 
      examples/getting-started/basic-usage.md
    • Button/按钮 → 
      examples/components/button.md
    • Form/表单 → 
      examples/components/form.md
    • Table/表格 → 
      examples/components/table.md
    • Input/输入框 → 
      examples/components/input.md
    • Select/选择器 → 
      examples/components/select.md
    • DatePicker/日期选择器 → 
      examples/components/date-picker.md
    • Modal/对话框 → 
      examples/components/modal.md
    • Layout/布局 → 
      examples/components/layout.md
    • Menu/菜单 → 
      examples/components/menu.md
    • Theme customization/主题定制 → 
      examples/advanced/theme-customization.md
    • Internationalization/国际化 → 
      examples/advanced/internationalization.md
    • TypeScript/类型支持 → 
      examples/advanced/typescript.md
  2. Load the appropriate example file from the 
    examples/
    directory:
    Getting Started (快速开始) - 
    examples/getting-started/
    :
    • examples/getting-started/installation.md
      - Installing Ant Design and basic setup
    • examples/getting-started/basic-usage.md
      - Basic component usage
    Components (组件) - 
    examples/components/
    :
    • examples/components/button.md
      - Button component
    • examples/components/input.md
      - Input component
    • examples/components/form.md
      - Form component with validation
    • examples/components/table.md
      - Table component
    • examples/components/select.md
      - Select component
    • examples/components/date-picker.md
      - DatePicker component
    • examples/components/modal.md
      - Modal component
    • examples/components/layout.md
      - Layout component
    • examples/components/menu.md
      - Menu component
    • examples/components/icon.md
      - Icon component
    • examples/components/typography.md
      - Typography component
    • examples/components/grid.md
      - Grid component
    • examples/components/space.md
      - Space component
    • examples/components/card.md
      - Card component
    • examples/components/tabs.md
      - Tabs component
    • examples/components/pagination.md
      - Pagination component
    • examples/components/upload.md
      - Upload component
    • examples/components/upload.md
      - Upload component
    • examples/components/message.md
      - Message component
    • examples/components/notification.md
      - Notification component
    • examples/components/alert.md
      - Alert component
    • examples/components/spin.md
      - Spin component
    • examples/components/progress.md
      - Progress component
    Advanced (高级) - 
    examples/advanced/
    :
    • examples/advanced/theme-customization.md
      - Customizing theme
    • examples/advanced/internationalization.md
      - Internationalization setup
    • examples/advanced/typescript.md
      - TypeScript support
  3. Follow the specific instructions in that example file for syntax, structure, and best practices
    Important Notes:
    • All examples follow Ant Design React 4.x API
    • Examples include both JavaScript and TypeScript versions where applicable
    • Each example file includes key concepts, code examples, and key points
    • Always check the example file for best practices and common patterns
  4. Reference API documentation in the 
    api/
    directory when needed:
    • api/components.md
      - Component API reference
    • api/config-provider.md
      - ConfigProvider API
    • api/design-tokens.md
      - Design tokens API
  5. Use templates from the 
    templates/
    directory:
    • templates/project-setup.md
      - Project setup templates
    • templates/component-template.md
      - Component usage templates
本技能的组织结构与Ant Design React官方文档结构一致（https://4x-ant-design.antgroup.com/docs/react/introduce-cn, https://4x-ant-design.antgroup.com/components/overview-cn/）。使用Ant Design React时：
  1. 从用户的请求中确定主题:
    • Getting started/快速开始 → 
      examples/getting-started/installation.md
      或 
      examples/getting-started/basic-usage.md
    • Button/按钮 → 
      examples/components/button.md
    • Form/表单 → 
      examples/components/form.md
    • Table/表格 → 
      examples/components/table.md
    • Input/输入框 → 
      examples/components/input.md
    • Select/选择器 → 
      examples/components/select.md
    • DatePicker/日期选择器 → 
      examples/components/date-picker.md
    • Modal/对话框 → 
      examples/components/modal.md
    • Layout/布局 → 
      examples/components/layout.md
    • Menu/菜单 → 
      examples/components/menu.md
    • Theme customization/主题定制 → 
      examples/advanced/theme-customization.md
    • Internationalization/国际化 → 
      examples/advanced/internationalization.md
    • TypeScript/类型支持 → 
      examples/advanced/typescript.md
  2. 从
    examples/
    目录中加载对应的示例文件    :
    Getting Started (快速开始) - 
    examples/getting-started/
    :
    • examples/getting-started/installation.md
      - Ant Design的安装与基础配置
    • examples/getting-started/basic-usage.md
      - 组件基础使用方法
    Components (组件) - 
    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组件
    Advanced (高级) - 
    examples/advanced/
    :
    • examples/advanced/theme-customization.md
      - 主题定制
    • examples/advanced/internationalization.md
      - 国际化配置
    • examples/advanced/typescript.md
      - TypeScript支持
  3. 遵循该示例文件中的具体说明，包括语法、结构和最佳实践
    重要说明:
    • 所有示例均遵循Ant Design React 4.x API
    • 适用的示例包含JavaScript和TypeScript两种版本
    • 每个示例文件都包含核心概念、代码示例和关键点
    • 请务必查看示例文件中的最佳实践与通用模式
  4. 必要时参考
    api/
    目录中的API文档    :
    • api/components.md
      - 组件API参考
    • api/config-provider.md
      - ConfigProvider API
    • api/design-tokens.md
      - 设计令牌API
  5. 使用
    templates/
    目录中的模板    :
    • templates/project-setup.md
      - 项目配置模板
    • templates/component-template.md
      - 组件使用模板

Doc mapping (one-to-one with official documentation)

文档映射（与官方文档一一对应）

Guide (指南):
Components (组件):
Guide (指南):
Components (组件):

Examples and Templates

示例与模板

This skill includes detailed examples organized to match the official documentation structure. All examples are in the 
examples/
directory (see mapping above).
To use examples:
  • Identify the topic from the user's request
  • Load the appropriate example file from the mapping above
  • Follow the instructions, syntax, and best practices in that file
  • Adapt the code examples to your specific use case
To use templates:
  • Reference templates in 
    templates/
    directory for common scaffolding
  • Adapt templates to your specific needs and coding style
本技能包含详细的示例，其组织结构与官方文档一致。所有示例均位于
examples/
目录中（请参考上述映射关系）。
使用示例的方法:
  • 从用户的请求中确定主题
  • 根据上述映射关系加载对应的示例文件
  • 遵循文件中的说明、语法和最佳实践
  • 根据具体需求调整代码示例
使用模板的方法:
  • 参考
    templates/
    目录中的模板进行通用脚手架搭建
  • 根据具体需求和编码风格调整模板

API Reference

API参考

Detailed API documentation is available in the 
api/
directory, organized to match the official Ant Design React API documentation structure:
详细的API文档位于
api/
目录中，其组织结构与Ant Design React官方API文档一致：

Components API (
api/components.md
)

组件API (
api/components.md
)

  • All component props and APIs
  • Component methods and events
  • Component types and interfaces
  • 所有组件的属性与API
  • 组件方法与事件
  • 组件类型与接口

ConfigProvider API (
api/config-provider.md
)

ConfigProvider API (
api/config-provider.md
)

  • ConfigProvider component API
  • Global configuration options
  • Locale configuration
  • ConfigProvider组件API
  • 全局配置选项
  • 区域设置配置

Design Tokens API (
api/design-tokens.md
)

设计令牌API (
api/design-tokens.md
)

  • Design tokens reference
  • Theme customization tokens
  • CSS variables
To use API reference:
  1. Identify the API you need help with
  2. Load the corresponding API file from the 
    api/
    directory
  3. Find the API signature, parameters, return type, and examples
  4. Reference the linked example files for detailed usage patterns
  5. All API files include links to relevant example files in the 
    examples/
    directory
  • 设计令牌参考
  • 主题定制令牌
  • CSS变量
使用API参考的方法:
  1. 确定需要帮助的API
  2. 从
    api/
    目录中加载对应的API文件
  3. 查找API签名、参数、返回类型和示例
  4. 参考关联的示例文件获取详细使用模式
  5. 所有API文件均包含指向
    examples/
    目录中相关示例文件的链接

Best Practices

最佳实践

  1. Import styles: Import Ant Design CSS in your entry file
  2. Use ConfigProvider: Wrap your app with ConfigProvider for global configuration
  3. Form validation: Use Form component with validation rules
  4. TypeScript: Use TypeScript for better type safety
  5. Theme customization: Use design tokens for consistent theming
  6. Internationalization: Use ConfigProvider with locale for i18n
  7. Component composition: Compose components for complex UIs
  8. Performance: Use React.memo and useMemo for optimization
  9. Accessibility: Follow Ant Design accessibility guidelines
  10. Responsive design: Use Grid and responsive utilities
  1. 导入样式: 在入口文件中导入Ant Design CSS
  2. 使用ConfigProvider: 用ConfigProvider包裹应用以进行全局配置
  3. 表单验证: 使用带验证规则的Form组件
  4. TypeScript: 使用TypeScript以获得更好的类型安全性
  5. 主题定制: 使用设计令牌实现一致的主题
  6. 国际化: 结合ConfigProvider与区域设置实现i18n
  7. 组件组合: 通过组件组合构建复杂UI
  8. 性能优化: 使用React.memo和useMemo进行优化
  9. 可访问性: 遵循Ant Design可访问性指南
  10. 响应式设计: 使用Grid和响应式工具

Resources

资源

Keywords

关键词

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, 组件库, 按钮, 表单, 表格, 输入框, 选择器, 日期选择器, 对话框, 布局, 菜单, 主题, 国际化, 类型支持
Ant Design, Ant Design React, antd, React UI库, 组件, Button, Form, Table, Input, Select, DatePicker, Modal, Layout, Menu, 主题, 定制, 国际化, i18n, TypeScript, 设计系统, 组件库, 按钮, 表单, 表格, 输入框, 选择器, 日期选择器, 对话框, 布局, 菜单, 主题, 国际化, 类型支持