軟件介紹

Ant Design是一款由螞蟻金服開發的產品設計協作平臺，這款軟件包含了目前最為齊全的開發和設計工具，從而幫助用戶快速完成網頁前端語言的設計。這樣的話，用戶就可以通過Ant Design Pro來無縫銜接產品，從而大大降低溝通所產生的成本。

Ant Design官方介紹

藍湖是一款產品文檔和設計圖的共享平臺，幫助互聯網團隊更好地管理文檔和設計圖。藍湖可以在線展示Axure，自動生成設計圖標注，與團隊共享設計圖，展示頁面之間的跳轉關系。藍湖支持從Sketch、Ps一鍵共享、在線討論，而且藍湖只需簡單幾步就能將設計圖變成一個可以點擊的演示原型，藍湖還支持分享給同事，讓他也可以在手機中查看設計效果。藍湖已經成為新一代產品設計的工作方式。

軟件特色

產品經理輕松表達需求

在線展示文檔，團隊查看更方便

支持在線評審，更新通知，自動備份

一個地方展現所有資源

匯總文檔和設計，理解更輕松

按頁面邏輯連線，展現邏輯更清晰

快速生成交互原型

強調產品交互的說明和備注

產品經理可以基于設計圖發表意見

設計師更快交付設計圖

自動標注設計圖，從此不再低效手工

一鍵生成標注和切圖，自動共享給同事

設計圖管理

清晰展現設計圖不同狀態

設計圖批注

打點標記進行評論, @相關成員可實時通知

自動保存歷史版本

隨時查看歷史版本，支持自動備份源文件

工程師快速省心開發

查看標注

點擊任意元素，即可查看標注信息

切圖下載

一鍵下載，支持 JPG、PNG、SVG、WebP

自動生成代碼

自動生成 CSS、iOS 和 Android 代碼

小程序組件

可自動生成小程序代碼

Ant Design功能介紹

一鍵分享

自動共享文檔，在線展示Axure、Word

無需手動導出、壓縮文檔、發送文件

同事無需查收郵件、下載、解壓

產品經理更輕松專注，研發團隊更快更高效

高效評審

告別冗長的評審會議，讓團隊把意見放在會前

評審內容支持 @團隊成員，自動郵件通知

討論內容留存沉淀，減少低效信息同步

提高開會效率，降低溝通成本，縮短研發周期

自動備份

保留所有歷史版本，便于信息沉淀和查找

自動生成更新記錄，改動一目了然

從此，不再擔心歷史文檔找不到

文檔在線預覽

一個地方匯總所有文檔

支持 Confluence 等外部文檔鏈接

支持綁定設計圖，讓文檔和設計在一起

讓工程師、設計師理解更輕松，開發更高效

Ant Design使用方法

一、ant-design 文檔

搜索到  ant-design  的文檔開始使用

在這里我們可以看到一個快速上手的教程，并且菜單欄有告訴我們在各個框架中如何去使用 ant-design

二、create-react-app 中使用 ant-design

① 安裝

首先就是使用  create-react-app  搭建好 react 項目了，然后需要在 react 項目中去 安裝  ant-design

yarn add ant-design

② 使用 ant-design 中的組件

使用組件無非就是看適合自己的組件，然后復制代碼。

找到組件，復制對應 js 代碼，css 代碼

現在我們用 柵格布局組件作為示例，選擇兩列柵格布局，復制 import { Row, Col } from 'antd'; 這個引入組件的代碼以及復制這個段 html 代碼

<Row>

<Col span={12}>col-12</Col>

<Col span={12}>col-12</Col>

</Row>

這里沒有 額外的 css 內容，就不需要復制 css

放置到我們的 js 頁面中即可

三、在 TypeScript 中使用

現在  TypeScript 使用應該是比較深層次的，  TypeScript 適合用于團隊項目。

yarn create react-app antd-demo-ts --typescript  這個命令是使用create react-app 腳手架搭建了 react 的typescript 項目

① 安裝

不管是 js 項目還是 ts 項目，都需要先安裝  ant-design

yarn add ant-design

② 使用 ant-design 中的組件

使用組件無非就是看適合自己的組件，然后復制代碼。

找到組件，復制對應 js 代碼，css 代碼

現在我們用 柵格布局組件作為示例，選擇兩列柵格布局，復制 import { Row, Col } from 'antd'; 這個引入組件的代碼以及復制這個段 html 代碼

<Row>

<Col span={12}>col-12</Col>

<Col span={12}>col-12</Col>

</Row>

這里沒有 額外的 css 內容，就不需要復制 css

放置到我們的 tsx 頁面中即可

常見問題

問：軟件會提供 Sass/Stylus 等格式的樣式文件嗎？

不會提供。但你可以使用工具將 Less 轉換成 Sass/Stylus 等。

問：使用時點擊“Select Dropdown DatePicker TimePicker Popover Popconfirm”內的另一個 popup 組件時它會消失，如何解決？

該問題在3.11.0后續版本中已經得到解決。但如果您使用的仍然是舊版本，可以通過:

來在 Popover 中渲染組件，或者使用其他的 getXxxxContainer 參數進行解決。

問：如果只想使用 Menu/Button 等，是不是必須 import 整個 antd 和它的樣式文件？

可以試試 babel-plugin-import，或者用下面這種方式來按需加載：

或者（ES6 支持的 tree shaking 方式）：

更新日志

3.24.0版本更新內容：

首頁新增語雀的推廣鏈接。

Table

新增 tableLayout 屬性，支持設置表格的 table-layout 布局，并在固定表頭/列下默認開啟 tableLayout="fixed"，解決因為表格自動根據內容排版造成的列對齊問題。

新增 column.ellipsis 支持單元格內容自動省略。

新增 scroll.scrollToFirstRowOnChange 屬性，用于設置在翻頁后是否滾動到表格頂部。

filterDropdown 新增 visible 參數，用于獲取下拉框的顯示狀態。

title 方法新增 sortColumn 參數，用于獲取當前排序的列。

排序時 onChange 的 sorter 參數將始終包含 column 信息。

修復過濾下拉菜單的間距問題。

Anchor 新增 onChange 屬性，用于監聽錨點鏈接的改變。

Upload

新增 showDownloadIcon 屬性，用于展示下載圖標。

支持 onRemove 對上傳中斷的控制。

Input.Search 新增 loading 屬性，用于展示加載中的狀態。

Grid 的 gutter 屬性新增垂直間距的支持，現在你可以給 gutter 設置一個數組，數組的第二個值就表示垂直間距。

message 新增支持通過唯一的 key 來更新內容。

Layout 新增 zeroWidthTriggerStyle 屬性以控制當 collapsedWidth 為 0 時，出現的特殊 trigger 的樣式。

Drawer 新增 drawerStyle 和 headerStyle 屬性。

PageHeader

重新設計了樣式

新增 ghost 屬性，用于設置是否需要白底背景。

ConfigProvider

新增 pageHeader 用于全局控制 PageHeader 的樣式。

修復 moment 不能被 tree shaking 的問題。

修復 TreeSelect 的 removeIcon 和 clearIcon 屬性不生效的問題。

修復 Tree 設置 showLine 后 switcherIcon 不生效的問題。

修復 Slider 組件設置 handle 大小后定位錯誤的問題。

Collapse

修復在 IE 11 下的圖標樣式。

修復 expandIcon 的 className 會被覆蓋的問題。

修復 Tree.DirectoryTree 組件傳入 treeData 時 defaultExpandAll 不生效的問題。

修復 Dropdown 下部分 Menu 樣式錯亂的問題。

修復 Cascader 的 placeholder 國際化錯誤。

新增 less 變量 @typography-title-margin-top 和 @typography-title-margin-bottom。

提示：廢棄 Input.TextArea 的 autosize 屬性，請使用 autoSize 代替。