介绍

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 的文章

關鍵字: 阿里云计算 组件 阿里