介紹

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-app
cd 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>
  )
}

部分組件預覽

以下截取部分組件，包括基礎組件和業務組件

• Badge 徽標數

• 氣泡提示

• 麵包屑

• 按鈕

• 日曆

• 卡片

• 級聯聯動

• 展開聯動

• 複選框

• 日期時間（支持國際化）

• 模態對話框

• 表單類

• 圖標

• Loading

• message

• 導航

• 分頁

• 進度條

• 評分

• 搜索

• 分步

• tab

• 表格

• tag

• 時間軸

• 穿梭框

• 樹形

• 上傳控制項

以下是業務組件

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