介紹
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！