介绍
console-components 是针对阿里云控制台场景
项目地址
本项目：https://github.com/aliyun/alibabacloud-console-components
Alibaba Fusionhttps://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 徽标数以下是业务组件
总体来说console-components是一个非常不做的组件库，虽然大家都树枝antd，但是同为阿里巴巴的组件库，console-components也是一个不错的组件，可以应用在不用的应用场景！enjoy it！