介紹

console-components 是針對阿里雲控制檯場景的 React 元件庫，基於Alibaba Fusion元件庫實現。該專案的代號為Wind。Wind 是阿里雲控制檯視覺規範的實現者，幫助阿里內部以及生態夥伴的開發者，更快地編寫的阿里雲控制檯應用，無需為視覺規範而困擾。在保障阿里雲控制檯的體驗一致性的同時，降低使用者開發成本。

專案地址本專案：

https://github.com/aliyun/alibabacloud-console-components

Alibaba Fusion

https://github.com/alibaba-fusion/next

元件介紹

console-components分為兩種元件，一種是基礎元件，另一種是業務元件。

使用基礎元件

使用create-react-app建立一個專案：

npx create-react-app my-appcd my-app

安裝依賴：

yarn add @alicloud/console-components moment styled-components

其中，moment 和 styled-components 是 Console Components 的 peerDependencies。

在應用入口(index.js)引入 Console Components 的樣式：

import '@alicloud/console-components/dist/wind.css'

匯入元件並使用：

// ...import { Button } from '@alicloud/console-components'// ...// 在jsx中使用：function App() { return ( <div className="App"> <h1>Console Components Demo</h1> <Button type="primary">Button works!</Button> </div> )}使用業務元件

為了方便使用者獨立升級不同的業務元件，每個業務元件對應一個 npm package。

如果發現有業務元件恰好能夠滿足你的需求，安裝並使用即可：

npm install -S @alicloud/console-components-app-layout @alicloud/console-components-console-menu// ...import CCAppLayout from '@alicloud/console-components-app-layout'import CCConsoleMenu from '@alicloud/console-components-console-menu'// ...// 在jsx中使用：const navMenu = ( <CCConsoleMenu items={[ { key: 'overview', label: '概覽', }, ]} header="頁面一級導航" />)function App() { return ( <div className="App"> <CCAppLayout nav={navMenu}> 頁面內容： <Button type="primary">使用Button</Button> </CCAppLayout> </div> )}部分元件預覽

以下擷取部分元件，包括基礎元件和業務元件

氣泡提示麵包屑日曆卡片級聯聯動展開聯動複選框日期時間（支援國際化）模態對話方塊表單類圖示Loadingmessage導航分頁進度條評分

搜尋分步tab

表格tag時間軸樹形上傳控制元件

以下是業務元件

總體來說console-components是一個非常不做的元件庫，雖然大家都樹枝antd，但是同為阿里巴巴的元件庫，console-components也是一個不錯的元件，可以應用在不用的應用場景！enjoy it！