軟件介紹
Ant Design是一款由螞蟻金服開發(fā)的產(chǎn)品設(shè)計協(xié)作平臺,這款軟件包含了目前最為齊全的開發(fā)和設(shè)計工具,從而幫助用戶快速完成網(wǎng)頁前端語言的設(shè)計。這樣的話,用戶就可以通過Ant Design Pro來無縫銜接產(chǎn)品,從而大大降低溝通所產(chǎn)生的成本。
Ant Design官方介紹
藍湖是一款產(chǎn)品文檔和設(shè)計圖的共享平臺,幫助互聯(lián)網(wǎng)團隊更好地管理文檔和設(shè)計圖。藍湖可以在線展示Axure,自動生成設(shè)計圖標注,與團隊共享設(shè)計圖,展示頁面之間的跳轉(zhuǎn)關(guān)系。藍湖支持從Sketch、Ps一鍵共享、在線討論,而且藍湖只需簡單幾步就能將設(shè)計圖變成一個可以點擊的演示原型,藍湖還支持分享給同事,讓他也可以在手機中查看設(shè)計效果。藍湖已經(jīng)成為新一代產(chǎn)品設(shè)計的工作方式。
軟件特色
產(chǎn)品經(jīng)理輕松表達需求
在線展示文檔,團隊查看更方便
支持在線評審,更新通知,自動備份
一個地方展現(xiàn)所有資源
匯總文檔和設(shè)計,理解更輕松
按頁面邏輯連線,展現(xiàn)邏輯更清晰
快速生成交互原型
強調(diào)產(chǎn)品交互的說明和備注
產(chǎn)品經(jīng)理可以基于設(shè)計圖發(fā)表意見
設(shè)計師更快交付設(shè)計圖
自動標注設(shè)計圖,從此不再低效手工
一鍵生成標注和切圖,自動共享給同事
設(shè)計圖管理
清晰展現(xiàn)設(shè)計圖不同狀態(tài)
設(shè)計圖批注
打點標記進行評論, @相關(guān)成員可實時通知
自動保存歷史版本
隨時查看歷史版本,支持自動備份源文件
工程師快速省心開發(fā)
查看標注
點擊任意元素,即可查看標注信息
切圖下載
一鍵下載,支持 JPG、PNG、SVG、WebP
自動生成代碼
自動生成 CSS、iOS 和 Android 代碼
小程序組件
可自動生成小程序代碼
Ant Design功能介紹
一鍵分享
自動共享文檔,在線展示Axure、Word
無需手動導出、壓縮文檔、發(fā)送文件
同事無需查收郵件、下載、解壓
產(chǎn)品經(jīng)理更輕松專注,研發(fā)團隊更快更高效
高效評審
告別冗長的評審會議,讓團隊把意見放在會前
評審內(nèi)容支持 @團隊成員,自動郵件通知
討論內(nèi)容留存沉淀,減少低效信息同步
提高開會效率,降低溝通成本,縮短研發(fā)周期
自動備份
保留所有歷史版本,便于信息沉淀和查找
自動生成更新記錄,改動一目了然
從此,不再擔心歷史文檔找不到
文檔在線預(yù)覽
一個地方匯總所有文檔
支持 Confluence 等外部文檔鏈接
支持綁定設(shè)計圖,讓文檔和設(shè)計在一起
讓工程師、設(shè)計師理解更輕松,開發(fā)更高效
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 中的組件
使用組件無非就是看適合自己的組件,然后復制代碼。
找到組件,復制對應(yīng) js 代碼,css 代碼
現(xiàn)在我們用 柵格布局組件作為示例,選擇兩列柵格布局,復制 import { Row, Col } from 'antd'; 這個引入組件的代碼以及復制這個段 html 代碼
<Row>
<Col span={12}>col-12</Col>
<Col span={12}>col-12</Col>
</Row>
這里沒有 額外的 css 內(nèi)容,就不需要復制 css
放置到我們的 js 頁面中即可
三、在 TypeScript 中使用
現(xiàn)在 TypeScript 使用應(yīng)該是比較深層次的, TypeScript 適合用于團隊項目。
yarn create react-app antd-demo-ts --typescript 這個命令是使用create react-app 腳手架搭建了 react 的typescript 項目
① 安裝
不管是 js 項目還是 ts 項目,都需要先安裝 ant-design
yarn add ant-design
② 使用 ant-design 中的組件
使用組件無非就是看適合自己的組件,然后復制代碼。
找到組件,復制對應(yīng) js 代碼,css 代碼
現(xiàn)在我們用 柵格布局組件作為示例,選擇兩列柵格布局,復制 import { Row, Col } from 'antd'; 這個引入組件的代碼以及復制這個段 html 代碼
<Row>
<Col span={12}>col-12</Col>
<Col span={12}>col-12</Col>
</Row>
這里沒有 額外的 css 內(nèi)容,就不需要復制 css
放置到我們的 tsx 頁面中即可
常見問題
問:軟件會提供 Sass/Stylus 等格式的樣式文件嗎?
不會提供。但你可以使用工具將 Less 轉(zhuǎn)換成 Sass/Stylus 等。
問:使用時點擊“Select Dropdown DatePicker TimePicker Popover Popconfirm”內(nèi)的另一個 popup 組件時它會消失,如何解決?
該問題在3.11.0后續(xù)版本中已經(jīng)得到解決。但如果您使用的仍然是舊版本,可以通過:
來在 Popover 中渲染組件,或者使用其他的 getXxxxContainer 參數(shù)進行解決。
問:如果只想使用 Menu/Button 等,是不是必須 import 整個 antd 和它的樣式文件?
可以試試 babel-plugin-import,或者用下面這種方式來按需加載:
或者(ES6 支持的 tree shaking 方式):
更新日志
3.24.0版本更新內(nèi)容:
首頁新增語雀的推廣鏈接。
Table
新增 tableLayout 屬性,支持設(shè)置表格的 table-layout 布局,并在固定表頭/列下默認開啟 tableLayout="fixed",解決因為表格自動根據(jù)內(nèi)容排版造成的列對齊問題。
新增 column.ellipsis 支持單元格內(nèi)容自動省略。
新增 scroll.scrollToFirstRowOnChange 屬性,用于設(shè)置在翻頁后是否滾動到表格頂部。
filterDropdown 新增 visible 參數(shù),用于獲取下拉框的顯示狀態(tài)。
title 方法新增 sortColumn 參數(shù),用于獲取當前排序的列。
排序時 onChange 的 sorter 參數(shù)將始終包含 column 信息。
修復過濾下拉菜單的間距問題。
Anchor 新增 onChange 屬性,用于監(jiān)聽錨點鏈接的改變。
Upload
新增 showDownloadIcon 屬性,用于展示下載圖標。
支持 onRemove 對上傳中斷的控制。
Input.Search 新增 loading 屬性,用于展示加載中的狀態(tài)。
Grid 的 gutter 屬性新增垂直間距的支持,現(xiàn)在你可以給 gutter 設(shè)置一個數(shù)組,數(shù)組的第二個值就表示垂直間距。
message 新增支持通過唯一的 key 來更新內(nèi)容。
Layout 新增 zeroWidthTriggerStyle 屬性以控制當 collapsedWidth 為 0 時,出現(xiàn)的特殊 trigger 的樣式。
Drawer 新增 drawerStyle 和 headerStyle 屬性。
PageHeader
重新設(shè)計了樣式
新增 ghost 屬性,用于設(shè)置是否需要白底背景。
ConfigProvider
新增 pageHeader 用于全局控制 PageHeader 的樣式。
修復 moment 不能被 tree shaking 的問題。
修復 TreeSelect 的 removeIcon 和 clearIcon 屬性不生效的問題。
修復 Tree 設(shè)置 showLine 后 SwitcherIcon 不生效的問題。
修復 Slider 組件設(shè)置 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 代替。
- 精選留言 來自甘肅定西電信用戶 發(fā)表于: 2023-8-17
- 謝謝小編大大分享,支持一下。。。
- 精選留言 來自黑龍江哈爾濱電信用戶 發(fā)表于: 2023-8-13
- 還沒用,看看
- 精選留言 來自西藏拉薩移動用戶 發(fā)表于: 2023-9-14
- 用了很多年了,真心覺得它一直很出色,希望它能一直強大下去。
- 精選留言 來自湖南長沙移動用戶 發(fā)表于: 2023-10-13
- 不打廣告。。真心覺得挺好
- 精選留言 來自山東日照電信用戶 發(fā)表于: 2023-5-21
- 用起來很棒,兼容性也不錯