Ant Design企業(yè)級(jí) UI 設(shè)計(jì)語(yǔ)言和 React 實(shí)現(xiàn)

 Ant Design，一套企業(yè)級(jí) UI 設(shè)計(jì)語(yǔ)言和 React 組件庫(kù)。

? 特性

• ?? 提煉自企業(yè)級(jí)中后臺(tái)產(chǎn)品的交互語(yǔ)言和視覺(jué)風(fēng)格。
• ?? 開(kāi)箱即用的高質(zhì)量 React 組件。
• ?? 使用 TypeScript 開(kāi)發(fā)，提供完整的類(lèi)型定義文件。
• ?? 全鏈路開(kāi)發(fā)和設(shè)計(jì)工具體系。
• ?? 數(shù)十個(gè)國(guó)際化語(yǔ)言支持。
• ?? 深入每個(gè)細(xì)節(jié)的主題定制能力。

?? 支持環(huán)境

• 現(xiàn)代瀏覽器和 IE11 及以上。
• 支持服務(wù)端渲染。
• Electron

IE / Edge	Firefox	Chrome	Safari	Electron
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

?? 安裝

npm install antd --save

yarn add antd

?? 示例

import { Button, DatePicker } from 'antd';

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

引入樣式：

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

你也可以使用 babel-plugin-import。

?? TypeScript

參考 在 TypeScript 中使用。

?? 國(guó)際化

參考 國(guó)際化文檔。

?? 鏈接

• 首頁(yè)
• 組件庫(kù)
• Ant Design Pro
• 更新日志
• React 底層基礎(chǔ)組件
• 移動(dòng)端組件
• Ant Design 圖標(biāo)
• Ant Design 色彩
• Ant Design Pro 布局組件
• Ant Design Pro 區(qū)塊集
• Dark Theme
• 首頁(yè)模板集
• 動(dòng)效
• 腳手架市場(chǎng)
• 設(shè)計(jì)規(guī)范速查手冊(cè)
• 開(kāi)發(fā)者說(shuō)明
• 版本發(fā)布規(guī)則
• 常見(jiàn)問(wèn)題
• CodeSandbox 模板 for bug reports
• Awesome Ant Design
• 定制主題

?? 本地開(kāi)發(fā)

你可以使用 Gitpod 進(jìn)行在線開(kāi)發(fā)：

或者克隆到本地開(kāi)發(fā):

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

打開(kāi)瀏覽器訪問(wèn) http://127.0.0.1:8001 ，更多本地開(kāi)發(fā)文檔。

?? 參與共建

請(qǐng)參考貢獻(xiàn)指南.

強(qiáng)烈推薦閱讀 《提問(wèn)的智慧》、《如何向開(kāi)源社區(qū)提問(wèn)題》 和 《如何有效地報(bào)告 Bug》、《如何向開(kāi)源項(xiàng)目提交無(wú)法解答的問(wèn)題》，更好的問(wèn)題更容易獲得幫助。