@ant-design/doc

Ant Design 是什么？

Ant Design 是一套企业级 UI 设计语言和 React 组件库。它提供了丰富的 UI 组件和设计模式，帮助开发者快速构建高质量的前端应用。

Ant Design 的特性有哪些？

• 提供了丰富的 UI 组件，如按钮、表单、表格、菜单等，以满足不同应用场景的需求。
• 遵循一套统一的设计语言和规范，使应用界面风格一致且美观。
• 支持多种主题，可根据需求轻松切换应用的样式。
• 基于 React 开发，提供了完善的 API 文档和示例，方便开发者使用和定制组件。
• 兼容性好，支持主流浏览器。

Ant Design 的 CSS 变量模式是什么？

Ant Design 5.x 的 CSS 变量模式是从版本 5.12.0 开始重新支持的功能。与 4.x 版本不同的是，这次 Ant Design 融合了 CSS-in-JS 的能力，并将所有 Design Token 纳入了 CSS 变量的管理范畴。这意味着在同一组件中，不同主题下的样式可以共享，从而减少样式体积。此外，切换主题时不再需要重新序列化样式，提升了主题切换的性能。如果你的应用依赖 Ant Design 的主题能力，强烈建议开启 CSS 变量模式。

以上是对 Ant Design 的基本信息和 CSS 变量模式的介绍。希望对你有帮助！

Ant Design 的特性包括什么？

Ant Design 的特性包括以下几点：

• 提炼自企业级中后台产品的交互语言和视觉风格。
• 开箱即用的高质量 React 组件。
• 使用 TypeScript 开发，提供完整的类型定义文件。
• 应用开发框架和设计工具配套。
• 支持数十个国际化语言。
• 提供基于 CSS-in-JS 的主题定制能力。

Ant Design 是为什么开发的？

Ant Design 是为了满足企业级中后台产品的需求而开发的。它提供了一套统一的交互语言和视觉风格，以及丰富多样的 React 组件，帮助开发者快速构建高质量的界面。

Ant Design 的主题定制能力是什么？

Ant Design 提供了基于 CSS-in-JS 的主题定制能力。开发者可以通过修改 CSS 变量来定制组件的样式，包括颜色、字体大小等。这样可以根据业务需求快速调整组件的外观，实现个性化的界面设计。

🖥 兼容环境

• 什么是兼容环境？兼容环境指的是能够正确显示和运行网页或应用程序的设备和浏览器。

• 哪些浏览器兼容 Ant Design 5.x 的 CSS 变量模式？ Ant Design 5.x 的 CSS 变量模式兼容以下浏览器：

• Edge (最新的两个版本)

• Firefox (最新的两个版本)

• Chrome (最新的两个版本)

• Safari (最新的两个版本)

• Electron (最新的两个版本)

• 是否支持服务端渲染？是的，Ant Design 5.x 的 CSS 变量模式支持服务端渲染。

• 是否支持 Electron？是的，Ant Design 5.x 的 CSS 变量模式支持 Electron 环境。

以上就是 Ant Design 5.x 的 CSS 变量模式的兼容环境信息。

如何在 React 中使用 Ant Design 的按钮组件和日期选择器组件？

可以按照以下步骤在 React 中使用 Ant Design 的按钮组件和日期选择器组件：

• 首先，确保已经安装了 Ant Design 的库，并导入所需的组件，例如：import { Button, DatePicker } from 'antd';

• 在你的组件中，使用 <Button> 组件来创建一个按钮，可以设置不同的按钮类型，例如：<Button type="primary">PRESS ME</Button>

• 使用 <DatePicker> 组件来创建一个日期选择器，例如：<DatePicker />

• 最后，将按钮和日期选择器组件添加到你的组件中，可以使用 <>...</> 来包裹它们，例如：

const App = () => (
  <>
    <Button type="primary">PRESS ME</Button>
    <DatePicker />
  </>
);

export default App;

这样就可以在你的 React 应用中使用 Ant Design 的按钮组件和日期选择器组件了。

如何在 React 中导入 Ant Design 的按钮组件和日期选择器组件？

要在 React 中使用 Ant Design 的按钮组件和日期选择器组件，你需要按照以下步骤进行导入：

• 首先，确保已经安装了 Ant Design 的库。

• 在你的组件文件中，导入所需的组件，例如：import { Button, DatePicker } from 'antd';

• 然后，你可以在你的组件中使用导入的按钮和日期选择器组件，例如：<Button type="primary">PRESS ME</Button> 和 <DatePicker />

• 最后，根据你的需求将按钮和日期选择器组件添加到你的组件中，例如：

const App = () => (
  <>
    <Button type="primary">PRESS ME</Button>
    <DatePicker />
  </>
);

export default App;

这样就完成了在 React 中导入 Ant Design 的按钮组件和日期选择器组件的步骤。

如何在 React 中使用 Ant Design 的按钮组件和日期选择器组件的示例代码？

要在 React 中使用 Ant Design 的按钮组件和日期选择器组件，你可以参考以下示例代码：

import React from 'react';
import { Button, DatePicker } from 'antd';

const App = () => (
  <>
    <Button type="primary">PRESS ME</Button>
    <DatePicker />
  </>
);

export default App;

上述示例代码演示了如何在 React 中导入 Ant Design 的按钮组件和日期选择器组件，并在组件中使用它们。你可以根据自己的需求修改和扩展这段代码。

如何在 Ant Design 中使用所有组件？

Ant Design 提供了一个组件概览页面，其中列出了所有可用的组件及其使用方法和示例。您可以在该页面上查找所需的组件，并根据示例代码进行使用。

如何定制 Ant Design 的主题？

Ant Design 允许您定制主题，以便根据您的品牌和需求来修改组件的外观。您可以使用 Ant Design 提供的 Less 变量文件，或者通过 JavaScript 运行时的方式来定制主题。在定制主题之后，您可以导入自定义主题并在应用程序中使用它。

如何国际化 Ant Design？

Ant Design 支持国际化，您可以根据您的需求将 Ant Design 的文本内容转化为多种语言。Ant Design 提供了一个 LocaleProvider 组件，您可以使用它将 Ant Design 的语言切换为不同的语言版本。您还可以定制翻译文件以适配您所需要的语言。

请注意，以上信息仅为 Ant Design 官方文档提供的信息。如需了解更多详细的内容和示例，请访问相应链接并查阅官方文档。

如何使用 Gitpod 进行在线开发？

可以使用 Gitpod 进行在线开发，具体操作如下：

• 点击此链接来打开 Gitpod。
• 克隆 Ant Design 仓库到 Gitpod 中。
• 在 Gitpod 中，打开终端。
• 运行以下命令进行安装：

$ git clone [e-mail]:ant-design/ant-design.git
$ cd ant-design
$ npm install

• 运行以下命令来启动应用：

$ npm start

• 打开浏览器，访问 http://127.0.0.1:8001 ，即可开始在线开发。

如果需要了解更多关于本地开发的信息，可以查看本地开发文档。

如何在本地克隆 Ant Design 仓库进行开发？

可以在本地克隆 Ant Design 仓库进行开发，具体操作如下：

• 在终端中运行以下命令来克隆 Ant Design 仓库：

$ git clone [e-mail]:ant-design/ant-design.git
$ cd ant-design

• 运行以下命令进行依赖安装：

$ npm install

• 运行以下命令来启动应用：

$ npm start

• 打开浏览器，访问 http://127.0.0.1:8001 ，即可开始开发。

如果需要了解更多关于本地开发的信息，可以查看本地开发文档。

如何使用本地开发文档进行开发？

如果需要了解更多关于本地开发的信息，可以查看 Ant Design 的本地开发文档。该文档详细介绍了使用本地开发的步骤和注意事项，包括从仓库克隆到启动应用的具体操作。通过参考本地开发文档，可以轻松地在本地进行 Ant Design 的开发工作。

如何参与共建项目？

要参与共建项目，你可以按照以下步骤进行操作：

• 阅读贡献指南，详细了解项目的贡献规则和流程。

• 推荐阅读《提问的智慧》、《如何向开源社区提问题》和《如何有效地报告 Bug》、《如何向开源项目提交无法解答的问题》，这些文章可以帮助你更好地提问和解决问题，提高与项目社区的互动效率。

• 如果你觉得项目对你有所帮助，你还可以通过赞助链接来支持项目的发展。

希望这些信息对你有所帮助，祝你能够顺利参与共建项目！如果你还有其他问题，欢迎提问。

如何在 GitHub Discussions 上提问问题？

如果您在使用 Ant Design 过程中遇到问题，可以通过 GitHub Discussions 来寻求帮助。在提问时，建议使用 Q&A 标签来标明您需要帮助。这样可以更容易地吸引到有经验的开发者来回答您的问题。

您可以在 Ant Design GitHub Discussions 页面找到相关的讨论板块。在您的问题标题和内容中描述清晰问题的细节和背景信息，这有助于其他开发者更好地理解问题并提供准确的答案。

如何在 Stack Overflow 上提问与 Ant Design 相关的问题？

如果您在使用 Ant Design 时遇到问题，可以通过在 Stack Overflow 上提问来寻求帮助。为了更好地引起 Ant Design 社区的关注，建议您在提问时加上 antd 标签。

首先，您可以访问 Stack Overflow Ant Design 标签页（英文）来浏览与 Ant Design 相关的问题和解答。如果您的问题没有在已有的帖子中找到答案，可以点击右上方的 "Ask Question" 按钮开始提问。

在提问时，请提供尽可能详细的问题描述和相关的代码片段。这样可以帮助其他开发者更好地理解和解答您的问题。

如何在 Segment Fault 上提问与 Ant Design 相关的问题？

如果您希望在中文环境下提问与 Ant Design 相关的问题，可以通过 Segment Fault 来寻求帮助。为了更好地引起关注，建议在提问时加上 antd 标签。

您可以访问 Segment Fault Ant Design 专栏（中文）来浏览与 Ant Design 相关的问题和解答。如果您没有找到已有问题的答案，可以点击 "提问" 按钮开始您的提问。

请尽可能在问题描述中提供清晰的细节和相关的代码，这将有助于其他开发者更好地理解和回答您的问题。

Ant Design 赞助者

Ant Design 是一个受欢迎的前端 UI 组件库，得到了许多热心用户和赞助者的支持。以下是 Ant Design 的赞助者信息：

• Backers（赞助者）：。点击这里查看全部赞助者。

• Sponsors（赞助商）：。点击这里查看全部赞助商。

感谢所有赞助者对 Ant Design 的支持！

Ant Design 赞助者信息

Ant Design 是一个受欢迎的前端 UI 组件库，得到了许多热心用户和赞助者的支持。以下是 Ant Design 的赞助者信息：

• Backers（赞助者）：。点击这里查看全部赞助者。

• Sponsors（赞助商）：。点击这里查看全部赞助商。

如果您对 Ant Design 感兴趣，欢迎成为我们的赞助者！

Ant Design 赞助者支持

Ant Design 是一个受欢迎的前端 UI 组件库，得到了许多热心用户和赞助者的支持。以下是 Ant Design 的赞助者信息：

• Backers（赞助者）：。点击这里查看全部赞助者。

如果您对 Ant Design 感兴趣，欢迎成为我们的赞助者，并为 Ant Design 的发展做出贡献！