ContextQMD
Back to Ant Design

README Zh CN

README-zh_CN.md

6.3.712.3 KB
Original Source
<div align="center"><a name="readme-top"></a> <h1>Ant Design</h1>

一套企业级 UI 设计语言和 React 组件库。

更新日志 · 报告问题 · 特性需求 · English · 中文

❤️ 赞助者

<a href="https://youmind.com/zh-CN?utm_source=ant-design"></a><a href="https://tractian.com?utm_source=ant-design"></a><a href="https://lobehub.com?utm_source=ant-design"></a>
</div>

✨ 特性

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

🖥 兼容环境

支持范围：https://browsersl.ist/#q=defaults

  • 现代浏览器。
  • 支持服务端渲染。
  • Electron

| Edge | Firefox | Chrome | Safari | Electron | | --- | --- | --- | --- | --- | | Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

📦 安装

bash
npm install antd --save
bash
yarn add antd
bash
pnpm add antd
bash
bun add antd

🔨 示例

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

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

export default App;

🌈 定制主题

参考 定制主题 文档。

🛡 TypeScript

antd 使用 TypeScript 编写，具有完整的类型定义，参考 在 Next.js 中使用。

🌍 国际化

参考 国际化文档。

🔗 链接

⌨️ 本地开发

推荐使用 opensumi.run 进行在线开发：

或者克隆到本地开发:

bash
$ git clone [email protected]:ant-design/ant-design.git
$ cd ant-design
$ npm install
$ npm start

打开浏览器访问 http://127.0.0.1:8001 ，更多本地开发文档。

🤝 参与共建

<table> <tr> <td> <a href="https://next.ossinsight.io/widgets/official/compose-recent-top-contributors?repo_id=34526884" target="_blank" style="display: block" align="center"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-recent-top-contributors/thumbnail.png?repo_id=34526884&image_size=auto&color_scheme=dark" width="280"> 
  </picture>
</a>
</td> <td rowspan="2"> <a href="https://next.ossinsight.io/widgets/official/compose-last-28-days-stats?repo_id=34526884" target="_blank" style="display: block" align="center"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-last-28-days-stats/thumbnail.png?repo_id=34526884&image_size=auto&color_scheme=dark" width="655" height="auto"> 
  </picture>
</a>
</td> </tr> <tr> <td> <a href="https://next.ossinsight.io/widgets/official/compose-org-active-contributors?period=past_28_days&activity=new&owner_id=12101536&repo_ids=34526884" target="_blank" style="display: block" align="center"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?period=past_28_days&activity=new&owner_id=12101536&repo_ids=34526884&image_size=2x3&color_scheme=dark" width="273" height="auto"> 
  </picture>
</a>
</td> </tr> </table> <a href="https://openomy.app/github/ant-design/ant-design" target="_blank" style="display: block; width: 100%;" align="center"> </a>

请参考贡献指南.

强烈推荐阅读 《提问的智慧》、《如何向开源社区提问题》 和 《如何有效地报告 Bug》、《如何向开源项目提交无法解答的问题》，更好的问题更容易获得帮助。

👥 社区互助

如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。

通过 GitHub Discussions 提问时，建议使用 Q&A 标签。

通过 Stack Overflow 或者 Segment Fault 提问时，建议加上 antd 标签。

  1. GitHub Discussions
  2. Stack Overflow（英文）
  3. Segment Fault（中文）

Issue 赞助

我们使用 Issuehunt 来推动您希望看到的针对 antd 的修复和改进，请查看我们的赞助列表：

❤️ Backers