介绍
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
)
}
- 使用业务组件
为了方便用户独立升级不同的业务组件,每个业务组件对应一个 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 (
页面内容:
)
}
部分组件预览
以下截取部分组件,包括基础组件和业务组件
- Badge 徽标数
- 气泡提示
- 面包屑
- 按钮
- 日历
- 卡片
- 级联联动
- 展开联动
- 复选框
- 日期时间(支持国际化)
- 模态对话框
- 表单类
- 图标
- Loading
- message
- 导航
- 分页
- 进度条
- 评分
- 搜索
- 分步
- tab
- 表格
- tag
- 时间轴
- 穿梭框
- 树形
- 上传控件
以下是业务组件
总体来说console-components是一个非常不做的组件库,虽然大家都树枝antd,但是同为阿里巴巴的组件库,console-components也是一个不错的组件,可以应用在不用的应用场景!enjoy it!