介紹

console-components 是針對阿里雲控制檯場景

項目地址

• 本項目：

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

• Alibaba Fusion

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

組件介紹

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

• 使用基礎組件

使用create-react-app創建一個項目：

<code>npx create-react-app my-app
cd my-app
/<code>

安裝依賴：

<code>yarn add @alicloud/console-components moment styled-components
/<code>

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

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

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

導入組件並使用：

<code>// ...
import { Button } from '@alicloud/console-components'
// ...
// 在jsx中使用：
function App() {
  return (
    

      
Console Components Demo

      <button>Button works!/<button>
    

  )
}/<code>

• 使用業務組件

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

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

<code>npm install -S @alicloud/console-components-app-layout @alicloud/console-components-console-menu
/<code>

<code>// ...
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 (
    

      <ccapplayout>
        頁面內容：
        <button>使用Button/<button>
      /<ccapplayout>
    

  )
}/<ccconsolemenu>/<code>

部分組件預覽

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

• Badge 徽標數

• 氣泡提示

• 麵包屑

• 按鈕

• 日曆

• 卡片

• 級聯聯動

• 展開聯動

• 複選框

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

• 模態對話框

• 表單類

• 圖標

• Loading

• message

• 導航

• 分頁

• 進度條

• 評分

• 搜索

• 分步

• tab

• 表格

• tag

• 時間軸

• 穿梭框

• 樹形

• 上傳控件

以下是業務組件

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

閱讀更多 最美分享Coder 的文章

關鍵字: 阿里巴巴 阿里雲計算 阿里巴巴集團