@alicloudfe/components
TypeScript icon, indicating that this package has built-in type declarations

1.4.24 • Public • Published

@alicloudfe/components

阿里云前端基础组件库,由混合云&公有云前端团队共建。 预览地址

💻 浏览器支持

Chrome Firefox Edge IE Safari Opera UC
9+ ✔

🚀 快速开始

🛠 安装

1.使用 npm 安装

npm install @alicloudfe/components --save

2.浏览器直接引用

在浏览器中使用 script 和 link 标签直接引入文件,并使用全局变量 AliCloudComponents。我们在 npm 包中提供了 @alicloudfe/components/dist 目录下的 index.jshybridcloud.css / xconsole.css 等样式文件,也可以通过 unpkg 进行下载。

<link rel="stylesheet" href="https://unpkg.alibaba-inc.com/@alicloudfe/components/dist/hybridcloud.css" />

<script src="https://unpkg.alibaba-inc.com/@alicloudfe/components/dist/index.js"></script>

// 以上引入都是引入的最新版本 @alicloudfe/components
,我们也可以引入固定版本的组件资源,以保证代码稳定
<script src="https://unpkg.alibaba-inc.com/@alicloudfe/components@1.0.12/dist/index.js"></script>

其中 @alicloudfe/components 默认 external 了这些依赖: reactreact-domprop-typesmoment 参考 html 如下:

 <script src="https://unpkg.alipay.com/react@16.14.0/umd/react.development.js"></script>
 <script src="https://unpkg.alipay.com/react-dom@16.14.0/umd/react-dom.development.js"></script>
 <script src="https://unpkg.alipay.com/prop-types@15.7.1/prop-types.js"></script>
 <script src="https://unpkg.alipay.com/moment@2.29.1/moment.js"></script>
 <script src="https://unpkg.alibaba-inc.com/@alicloudfe/components/dist/index.js"></script>

☔️ 依赖

  • @alicloudfe/components 基于 react@16 开发,目前并不兼容 react@16 以下的版本,且将 react/react-dom 作为 peerDependencies,需要用户手动提前安装或引入。
  • @alicloudfe/components 在处理日期时间相关组件逻辑时,使用了 moment 库,且将 moment 作为 peerDependencies,需要用户手动提前安装或引入。

🔨 示例

import { Button, DatePicker } from '@alicloudfe/components';

const App = () => (
  <>
    <Button type="primary">PRESS ME</Button>
    <DatePicker />
  </>
);

引入样式:

import '@alicloudfe/components/dist/hybridcloud.css'; 

💄关于样式文件

本组件库没有默认的样式主题,大家可根据业务选择不同的样式文件,目前的主题包括:

  • PaaS 侧

    • hybridcloud: 混合云亮色主题
    • hybridcloud-dark: 混合云暗色主题
    • xconsole:公有云 xconsole 主题
    • wind: 公有云 wind(旧版 xconsole) 主题
  • SaaS 侧

    • yunxiao: 云效主题
    • aone: Aone 主题
    • teamix: Teamix 主题
    • b-design: Bdesign 主题

对于每一个主题,我们生成了对应的四份样式文件供大家使用,以混合云亮色主题为例:

🔌 相关插件

  • @alicloud/console-toolkit-fusion-css-loader: 一个 webpack loader,用来修改 fusion 的 css 的选择器类名前缀。比如把 .next-btn 的类名修改成 .my-prefix-btn。 这样做的目的是,控制 fusion 样式的作用范围,让一个页面中可以同时存在多份不同版本的 fusion,同时不会出现样式冲突。

  • build-plugin-fusion-css: build-scripts 插件,功能同上,用于 build-scripts 体系

🤝 参与共建

一个好的开源组件库是需要不断打磨的,本组件库也是我们和 fusion 团队共建后的成果,欢迎大家提 PR,或者联系佐七萧雨成为仓库成员来提 MR。如何贡献请参考贡献指南

Package Sidebar

Install

npm i @alicloudfe/components

Weekly Downloads

13

Version

1.4.24

License

none

Unpacked Size

79.8 MB

Total Files

789

Last publish

Collaborators

  • zhongliang.lsh
  • bowei.jbw
  • yanqianyu.yqy
  • kiwikang99
  • zuoqi
  • console-fe
  • chesstar