【譯】Ant Design 3.0 駕到

木_羽_發表於2017-12-07

Ant Design 3.0 駕到

【譯】Ant Design 3.0 駕到

Ant Design 是一個致力於提升「使用者」和「設計者」使用體驗,提高「研發者」開發效率的企業中後臺設計體系。

14 個月前我們釋出了 Ant Design 2.0。期間我們收到了 200 多位貢獻者的 PR,經歷了大約 4000 個提交和超過 60 個版本

【譯】Ant Design 3.0 駕到

GitHub 上的 star 數也從 6k 上升到了 20k。

【譯】Ant Design 3.0 駕到

自 2015 年以來的 GitHub star 趨勢。

【譯】Ant Design 3.0 駕到

今天,我們很高興地宣佈,Ant Design 3.0 正式釋出了。在這個版本中,我們為元件和網站做了全新的設計,引入了新的顏色系統,重構了多個底層元件,加入了新的特性和優化,同時最小化不相容的更改。這裡可檢視到完整的更改日誌。

這是我們的主頁:ant.design/index-cn

全新的顏色系統

我們的新顏色系統源於天空的啟發,因為她的包容性與我們品牌基調一致。基於對天空色彩隨時間自然變化的觀察,對光和陰影規則的研究,我們重新編寫了顏色演算法來生成一個全新的調色盤,相應的層次也進行了優化。新調色盤的感官更年輕,更明亮,灰度過渡得更自然,是感性美和理性美的完美結合。此外,所有主流色值都參照了資訊獲取標準。

【譯】Ant Design 3.0 駕到

元件的新設計

在之前的版本中,元件的基本字型大小是 12px,我們收到了很多來自社群的反饋,建議我們加大字號。我們的設計師也意識到,在大螢幕普及的今天,14px 是更合適的字型大小。因此,我們將基本字型大小增大到了 14px,並對所有元件的尺寸進行了適配。

【譯】Ant Design 3.0 駕到

元件重寫

我們重寫了 Table 元件來解決一些歷史性問題。引入了一個新的工具 components,現在你可以使用這個工具來高度定製 Table 元件,這裡有一個示例,可以新增拖拽功能。

Form 元件也被重新編寫,為表單巢狀提供更好的支援。

另一個重寫的元件是 Steps,這個重寫的 Steps 有著更簡單的 DOM 結構並且相容到IE9。

全新的元件

這個版本,我們新增了兩個元件, ListDivider

List 元件對於文字、列表、圖片、段落和其他資料的顯示非常方便。與第三方庫整合也很簡單,例如,您可以使用 react-virtualized 來實現無限載入列表。更詳細的例子可以參考 List 文件。

Divider 元件可用於在不同的章節中分割文字段落,或者將行內文字/連結分開,如表的動態列。詳細的示例可以參考 Divider 文件。

全面支援 React 16 和 ES 模組

在這個版本中,我們增加了對 React 16 和 ES 模組的支援。如果你正在使用 webpack 3,那麼你現在可以通過 tree-shakingModuleConcatenationPlugin 來享受 antd 對元件的優化。如果你使用的是 babel-import-plugin,只需將 libraryDirectory 設定到 es 目錄。

更友好的 TypeScript 支援

在我們的程式碼中,我們已經刪除了所有的隱式 any 型別,在您的專案中不再需要配置 "allowSyntheticDefaultImports": true。如果您計劃使用 TypeScript 來編寫專案,請參考我們的新文件 「在 TypeScript 中使用」。

? 還有一件事兒

【譯】Ant Design 3.0 駕到

有些人可能已經知道了,我們正在開發另一個名為 Ant Design Pro 的專案,它是一個企業級中後臺前端/設計解決方案,是基於 Ant Design 3.0 的 React Boilerplate。儘管它還沒有達到 1.0 版本。但是隨著 antd 3.0 的釋出,現在可以投入使用了。

接下來

我們的設計師正在重新編寫我們的設計指南,並設計一個新的 Ant Design 官網。我們非常高興能夠提供更好的設計語言,以激發更多構建企業級應用的靈感。

為了使 1.0 早日成型,我們的工程師正在投入到 Ant Design Pro 努力工作,同時我們也需要你的幫助來翻譯我們的文件

最後

如果沒有你們的支援、反饋和參與,就不可能有今天的成功。感謝優秀的 Ant Design 社群。如果您在使用 antd 時遇到任何問題,可隨時在 GitHub 提交問題

感謝你的閱讀。敬請安裝、star、嘗試。 ?

連結


掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群,文章來源為 掘金 上的英文分享文章。內容覆蓋 AndroidiOS前端後端區塊鏈產品設計人工智慧等領域,想要檢視更多優質譯文請持續關注 掘金翻譯計劃官方微博知乎專欄

相關文章