# @alicloudfe/components

> A react component library for aliyun

Latest version **1.4.24** (published 2024-02-20) · 0 weekly downloads

## Install

```sh
npm install @alicloudfe/components
pnpm add @alicloudfe/components
yarn add @alicloudfe/components
bun add @alicloudfe/components
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.24 |
| Published | 2024-02-20 |
| First published | 2020-09-24 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 76.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 106 |
| Author | zuoqi |
| Maintainers | zhongliang.lsh, bowei.jbw, yanqianyu.yqy, kiwikang99, zuoqi, console-fe, chesstar |
| Keywords | aliyun, cloud design, component, ui, ui library, react, components, design, frontend |

## Links

- npm: https://www.npmjs.com/package/@alicloudfe/components
- Repository: https://github.com/aliyun/cloud-design
- Homepage: https://github.com/aliyun/cloud-design#readme
- Issues: https://github.com/aliyun/cloud-design/issues
- npm.io page: https://npm.io/package/@alicloudfe/components

## Dependencies (6)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [@alifd/next](https://npm.io/package/@alifd/next.md) ~1.25.0
- [@teamix/icon](https://npm.io/package/@teamix/icon.md) ^1.3.5
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^5.2.0
- [react-loading-skeleton](https://npm.io/package/react-loading-skeleton.md) ^2.1.1
- [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ^3.3.2

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 1.4.24 (latest) — 2024-02-20
- 1.5.0-beta.10 (beta) — 2024-06-03
- 1.4.0-alpha.0 (alpha) — 2022-09-01
- 1.5.0-beta.9 — 2024-04-01
- 1.5.0-beta.8 — 2024-03-29
- 1.5.0-beta.7 — 2024-02-23
- 1.5.0-beta.6 — 2024-02-21
- 1.5.0-beta.5 — 2024-02-20
- 1.5.0-beta.4 — 2024-02-20
- 1.5.0-beta.3 — 2024-02-20
- 1.5.0-beta.2 — 2024-01-17
- 1.5.0-beta.1 — 2024-01-10
- 1.4.23 — 2023-12-07
- 1000.0.0-beta.1 — 2023-08-24
- 1000.0.0-beta.0 — 2023-08-23
- … 282 more at https://npm.io/package/@alicloudfe/components/versions

## README

<h1 align="center">
<a href="https://www.npmjs.com/package/@alicloudfe/components">@alicloudfe/components</a>
</h1>

<div align="center">阿里云前端基础组件库，由混合云&公有云前端团队共建。 <a href="https://aliyun.github.io/cloud-design/#/button">预览地址</a></div>


# 💻 浏览器支持

| ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![UC](https://raw.github.com/alrra/browser-logos/master/src/uc/uc_48x48.png) |
| :--------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------: | :--------------------------------------------------------------------------: |
|                                            ✔                                             |                                              ✔                                              |                                         ✔                                          |                                                             9+ ✔                                                             |                                            ✔                                             |                                           ✔                                           |                                      ✔                                       |

# 🚀 快速开始
## 🛠 安装

### 1.使用 npm 安装

```bash
npm install @alicloudfe/components --save
```

### 2.浏览器直接引用

在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 `AliCloudComponents`。我们在 npm 包中提供了 `@alicloudfe/components/dist` 目录下的 `index.js` 和 `hybridcloud.css` / `xconsole.css` 等样式文件，也可以通过 [unpkg](https://unpkg.alibaba-inc.com/@alicloudfe/components/dist/) 进行下载。

```html
<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 了这些依赖： `react` 、 `react-dom` 、 `prop-types` 、`moment` 
参考 html 如下：
```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](https://github.com/moment/moment) 库，且将 moment 作为 peerDependencies，需要用户手动提前安装或引入。

## 🔨 示例

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

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

引入样式：

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

## 💄关于样式文件
本组件库没有默认的样式主题，大家可根据业务选择不同的样式文件，目前的主题包括：

- PaaS 侧
  - `hybridcloud`: 混合云亮色主题
  - `hybridcloud-dark`: 混合云暗色主题
  - `xconsole`:公有云 xconsole 主题
  - `wind`: 公有云 wind（旧版 xconsole） 主题

- SaaS 侧
  - `yunxiao`: 云效主题
  - `aone`: Aone 主题
  - `teamix`: Teamix 主题
  - `b-design`: Bdesign 主题

对于每一个主题，我们生成了对应的四份样式文件供大家使用，以混合云亮色主题为例：
- [`hybridcloud.css`](https://unpkg.alibaba-inc.com/@alicloudfe/components/dist/hybridcloud.css) : 全量未压缩样式（组件样式 + css var）
- [`hybridcloud.min.css`](https://unpkg.alibaba-inc.com/@alicloudfe/components/dist/hybridcloud.min.css) : 全量压缩后样式（组件样式 + css var）
- [`hybridcloud-no-var.css`](https://unpkg.alibaba-inc.com/@alicloudfe/components/dist/hybridcloud-no-var.css) : 纯组件样式，不包括 css var 定义
- [`hybridcloud-var.css`](https://unpkg.alibaba-inc.com/@alicloudfe/components/dist/hybridcloud-var.css) : 纯 css var 定义样式文件，用于主题切换


## 🔌 相关插件

- [@alicloud/console-toolkit-fusion-css-loader](https://github.com/aliyun/alibabacloud-console-toolkit/tree/preset-demos/packages/fusion-css-loader): 一个 webpack loader，用来修改 fusion 的 css 的选择器类名前缀。比如把 `.next-btn` 的类名修改成 `.my-prefix-btn`。 这样做的目的是，控制 fusion 样式的作用范围，让一个页面中可以同时存在多份不同版本的 fusion，同时不会出现样式冲突。

- [build-plugin-fusion-css](https://www.npmjs.com/package/build-plugin-fusion-css): build-scripts 插件，功能同上，用于 build-scripts 体系


# 🤝 参与共建
一个好的开源组件库是需要不断打磨的，本组件库也是我们和 [fusion](https://github.com/alibaba-fusion/next) 团队共建后的成果，欢迎大家提 PR，或者联系[佐七](https://github.com/zuoqi705)、[萧雨](https://github.com/csr632)成为仓库成员来提 MR。如何贡献请参考[贡献指南](https://github.com/aliyun/cloud-design/blob/master/base-components/docs/CONTRIBUTING.md)。

---
_Source: https://npm.io/package/@alicloudfe/components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._