介绍
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创建一个项目:
<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 的文章