Net Possibility Multiplier

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

    1.4.3 • 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。如何贡献请参考贡献指南

    Install

    npm i @alicloudfe/components

    DownloadsWeekly Downloads

    653

    Version

    1.4.3

    License

    none

    Unpacked Size

    63.9 MB

    Total Files

    769

    Last publish

    Collaborators

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