介绍

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 (
    

      
Console Components Demo

      Button works!
    

  )
}

• 使用业务组件

为了方便用户独立升级不同的业务组件，每个业务组件对应一个 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 = (
      items={[
      {
        key: 'overview',
        label: '概览',
      },
    ]}
    header="页面一级导航"
  />
)
function App() {
  return (
    

      
        页面内容：
        使用Button
      
    

  )
}

部分组件预览

以下截取部分组件，包括基础组件和业务组件

• Badge 徽标数

• 气泡提示

• 面包屑

• 按钮

• 日历

• 卡片

• 级联联动

• 展开联动

• 复选框

• 日期时间（支持国际化）

• 模态对话框

• 表单类

• 图标

• Loading

• message

• 导航

• 分页

• 进度条

• 评分

• 搜索

• 分步

• tab

• 表格

• tag

• 时间轴

• 穿梭框

• 树形

• 上传控件

以下是业务组件

总体来说console-components是一个非常不做的组件库，虽然大家都树枝antd，但是同为阿里巴巴的组件库，console-components也是一个不错的组件，可以应用在不用的应用场景！enjoy it！