軟件介紹

Ant Design是一款由螞蟻金服開發(fā)的產(chǎn)品設(shè)計(jì)協(xié)作平臺(tái)，這款軟件包含了目前最為齊全的開發(fā)和設(shè)計(jì)工具，從而幫助用戶快速完成網(wǎng)頁(yè)前端語(yǔ)言的設(shè)計(jì)。這樣的話，用戶就可以通過Ant Design Pro來無縫銜接產(chǎn)品，從而大大降低溝通所產(chǎn)生的成本。

Ant Design官方介紹

藍(lán)湖是一款產(chǎn)品文檔和設(shè)計(jì)圖的共享平臺(tái)，幫助互聯(lián)網(wǎng)團(tuán)隊(duì)更好地管理文檔和設(shè)計(jì)圖。藍(lán)湖可以在線展示Axure，自動(dòng)生成設(shè)計(jì)圖標(biāo)注，與團(tuán)隊(duì)共享設(shè)計(jì)圖，展示頁(yè)面之間的跳轉(zhuǎn)關(guān)系。藍(lán)湖支持從Sketch、Ps一鍵共享、在線討論，而且藍(lán)湖只需簡(jiǎn)單幾步就能將設(shè)計(jì)圖變成一個(gè)可以點(diǎn)擊的演示原型，藍(lán)湖還支持分享給同事，讓他也可以在手機(jī)中查看設(shè)計(jì)效果。藍(lán)湖已經(jīng)成為新一代產(chǎn)品設(shè)計(jì)的工作方式。

軟件特色

產(chǎn)品經(jīng)理輕松表達(dá)需求

在線展示文檔，團(tuán)隊(duì)查看更方便

支持在線評(píng)審，更新通知，自動(dòng)備份

一個(gè)地方展現(xiàn)所有資源

匯總文檔和設(shè)計(jì)，理解更輕松

按頁(yè)面邏輯連線，展現(xiàn)邏輯更清晰

快速生成交互原型

強(qiáng)調(diào)產(chǎn)品交互的說明和備注

產(chǎn)品經(jīng)理可以基于設(shè)計(jì)圖發(fā)表意見

設(shè)計(jì)師更快交付設(shè)計(jì)圖

自動(dòng)標(biāo)注設(shè)計(jì)圖，從此不再低效手工

一鍵生成標(biāo)注和切圖，自動(dòng)共享給同事

設(shè)計(jì)圖管理

清晰展現(xiàn)設(shè)計(jì)圖不同狀態(tài)

設(shè)計(jì)圖批注

打點(diǎn)標(biāo)記進(jìn)行評(píng)論, @相關(guān)成員可實(shí)時(shí)通知

自動(dòng)保存歷史版本

隨時(shí)查看歷史版本，支持自動(dòng)備份源文件

工程師快速省心開發(fā)

查看標(biāo)注

點(diǎn)擊任意元素，即可查看標(biāo)注信息

切圖下載

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

自動(dòng)生成代碼

自動(dòng)生成 CSS、iOS 和 Android 代碼

小程序組件

可自動(dòng)生成小程序代碼

Ant Design功能介紹

一鍵分享

自動(dòng)共享文檔，在線展示Axure、Word

無需手動(dòng)導(dǎo)出、壓縮文檔、發(fā)送文件

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

產(chǎn)品經(jīng)理更輕松專注，研發(fā)團(tuán)隊(duì)更快更高效

高效評(píng)審

告別冗長(zhǎng)的評(píng)審會(huì)議，讓團(tuán)隊(duì)把意見放在會(huì)前

評(píng)審內(nèi)容支持 @團(tuán)隊(duì)成員，自動(dòng)郵件通知

討論內(nèi)容留存沉淀，減少低效信息同步

提高開會(huì)效率，降低溝通成本，縮短研發(fā)周期

自動(dòng)備份

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

自動(dòng)生成更新記錄，改動(dòng)一目了然

從此，不再擔(dān)心歷史文檔找不到

文檔在線預(yù)覽

一個(gè)地方匯總所有文檔

支持 Confluence 等外部文檔鏈接

支持綁定設(shè)計(jì)圖，讓文檔和設(shè)計(jì)在一起

讓工程師、設(shè)計(jì)師理解更輕松，開發(fā)更高效

Ant Design使用方法

一、ant-design 文檔

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

在這里我們可以看到一個(gè)快速上手的教程，并且菜單欄有告訴我們?cè)诟鱾�(gè)框架中如何去使用 ant-design

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

① 安裝

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

yarn add ant-design

② 使用 ant-design 中的組件

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

找到組件，復(fù)制對(duì)應(yīng) js 代碼，css 代碼

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

<Row>

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

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

</Row>

這里沒有 額外的 css 內(nèi)容，就不需要復(fù)制 css

放置到我們的 js 頁(yè)面中即可

三、在 TypeScript 中使用

現(xiàn)在  TypeScript 使用應(yīng)該是比較深層次的，  TypeScript 適合用于團(tuán)隊(duì)項(xiàng)目。

yarn create react-app antd-demo-ts --typescript  這個(gè)命令是使用create react-app 腳手架搭建了 react 的typescript 項(xiàng)目

① 安裝

不管是 js 項(xiàng)目還是 ts 項(xiàng)目，都需要先安裝  ant-design

yarn add ant-design

② 使用 ant-design 中的組件

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

找到組件，復(fù)制對(duì)應(yīng) js 代碼，css 代碼

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

<Row>

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

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

</Row>

這里沒有 額外的 css 內(nèi)容，就不需要復(fù)制 css

放置到我們的 tsx 頁(yè)面中即可

常見問題

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

不會(huì)提供。但你可以使用工具將 Less 轉(zhuǎn)換成 Sass/Stylus 等。

問：使用時(shí)點(diǎn)擊“Select Dropdown DatePicker TimePicker Popover Popconfirm”內(nèi)的另一個(gè) popup 組件時(shí)它會(huì)消失，如何解決？

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

來在 Popover 中渲染組件，或者使用其他的 getXxxxContainer 參數(shù)進(jìn)行解決。

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

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

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

更新日志

3.24.0版本更新內(nèi)容：

首頁(yè)新增語(yǔ)雀的推廣鏈接。

Table

新增 tableLayout 屬性，支持設(shè)置表格的 table-layout 布局，并在固定表頭/列下默認(rèn)開啟 tableLayout="fixed"，解決因?yàn)楸砀褡詣?dòng)根據(jù)內(nèi)容排版造成的列對(duì)齊問題。

新增 column.ellipsis 支持單元格內(nèi)容自動(dòng)省略。

新增 scroll.scrollToFirstRowOnChange 屬性，用于設(shè)置在翻頁(yè)后是否滾動(dòng)到表格頂部。

filterDropdown 新增 visible 參數(shù)，用于獲取下拉框的顯示狀態(tài)。

title 方法新增 sortColumn 參數(shù)，用于獲取當(dāng)前排序的列。

排序時(shí) onChange 的 sorter 參數(shù)將始終包含 column 信息。

修復(fù)過濾下拉菜單的間距問題。

Anchor 新增 onChange 屬性，用于監(jiān)聽錨點(diǎn)鏈接的改變。

Upload

新增 showDownloadIcon 屬性，用于展示下載圖標(biāo)。

支持 onRemove 對(duì)上傳中斷的控制。

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

Grid 的 gutter 屬性新增垂直間距的支持，現(xiàn)在你可以給 gutter 設(shè)置一個(gè)數(shù)組，數(shù)組的第二個(gè)值就表示垂直間距。

message 新增支持通過唯一的 key 來更新內(nèi)容。

Layout 新增 zeroWidthTriggerStyle 屬性以控制當(dāng) collapsedWidth 為 0 時(shí)，出現(xiàn)的特殊 trigger 的樣式。

Drawer 新增 drawerStyle 和 headerStyle 屬性。

PageHeader

重新設(shè)計(jì)了樣式

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

ConfigProvider

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

修復(fù) moment 不能被 tree shaking 的問題。

修復(fù) TreeSelect 的 removeIcon 和 clearIcon 屬性不生效的問題。

修復(fù) Tree 設(shè)置 showLine 后 switcherIcon 不生效的問題。

修復(fù) Slider 組件設(shè)置 handle 大小后定位錯(cuò)誤的問題。

Collapse

修復(fù)在 IE 11 下的圖標(biāo)樣式。

修復(fù) expandIcon 的 className 會(huì)被覆蓋的問題。

修復(fù) Tree.DirectoryTree 組件傳入 treeData 時(shí) defaultExpandAll 不生效的問題。

修復(fù) Dropdown 下部分 Menu 樣式錯(cuò)亂的問題。

修復(fù) Cascader 的 placeholder 國(guó)際化錯(cuò)誤。

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

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