阿里巴巴融合/下一步：可配置基于React的web组件库alibaba-fusion/next: 🦍 A configurable component library for web built on React.

English | Chinese

An enterprise-class UI solution for backend system, aimed at settling the problems like cooperation between designers and front-developers, consistency of product experience and development efficiency.

一个面向后端系统的企业级用户界面解决方案，旨在解决设计者和前端开发者之间的合作、产品体验的一致性和开发效率等问题。

You can customize your own DesignSystem via Collaboration Platform.💖 Designers will receive design materials by Fusion Cool - an easy to use plugin on sketch. Developers will get code fragment on IceWorks. At the same time, the consistency between code and visual manuscript is guaranteed. 😍

您可以通过协作平台自定义您自己的设计系统。设计师将收到设计材料的融合凉爽 - 一个易于使用的插件草图。开发人员将在 IceWorks 上获得代码片段。同时，保证了代码与视觉稿件的一致性。

@alifd/next usually used with Fusion Design to improving designer-developer collaboration and development efficiency. Designer can customize the UI of components and release an npm theme package. Developer can use this theme package directly, and don't need to care about the UI refactoring. It saves the workload of reductive degree review repeatedly with designers, and greatly improves the development efficiency.

@ alifd/next 通常与 Fusion Design 一起使用，以提高设计师与开发人员的协作和开发效率。设计器可以自定义组件的 UI 并发布 npm 主题包。开发人员可以直接使用这个主题包，不需要关心 UI 重构。它节省了设计人员反复复查还原度的工作量，大大提高了开发效率。

| | | | | | | | | --- | --- | --- | --- | --- | --- | --- | | ✔ | ✔ | ✔ | 9+ 9 +✔ | ✔ | ✔ | ✔ |

🛠 Install 安装

1.Use NPM (Recommend) 1. 使用 NPM (推荐)

npm install @alifd/next --save

2.Import in Browser 2. 导入浏览器

Use the script and link tags in the browser to directly import the file and use the global variable Next. We provide files such as next.js/next.min.js and next.css/next.min.css in the @alifd/next/dist directory in the npm package, or via unpkg Download it.

使用浏览器中的脚本和链接标记直接导入文件并使用全局变量 Next。我们在 npm 包中的 @alifd/next/dist 目录中提供诸如 next.js/next.min.js 和 next.css/next.min.css 之类的文件，或者通过 unpkg 下载它。

<link rel="stylesheet" href="https://unpkg.com/@alifd/next/dist/next.css" />

<script src="https://unpkg.com/@alifd/next/dist/next.js"></script>

// The above ways import latest @alifd/next, we recommend you specify version.
<script src="https://unpkg.com/@alifd/next@1.8.6/dist/next.min.js"></script>

// Or import as your own static resource
<script src="../build/public/@alifd/next.js"></script>

☔️ Something Dependencies 依赖性

@alifd/next is based on 是基于react@16 development and is currently not compatible with versions below 目前与下面的版本不兼容react@16. react/react-dom is used as peerDependencies, which requires the user to manually install or import it. . react/react-dom 用作 peerDependencies，这需要用户手动安装或导入它
@alifd/next use 使用moment 瞬间 library to implement date-time related component. moment is also used as peerDependencies, which requires the user to manually install or import it. 库来实现与日期时间相关的组件。Moment 也被用作 peerDependencies，这要求用户手动安装或导入它

🎯 Import 进口

Import All 全部进口

import '@alifd/next/dist/next.css';
// import '@alifd/next/index.scss';

import { Button, Input } from '@alifd/next';

Import module with plugin 导入带插件的模块

1. Import module manually 1. 手动导入模块

import Button from '@alifd/next/lib/button';
import '@alifd/next/lib/button/style';

2. Use with 2. 使用babel-plugin-import (Recommend) (推荐)

// webpack babel loader option or .babelrc
{
    // ...
    plugins: [
        [
            'import',
            {
                libraryName: '@alifd/next',
                style: true,
            },
        ],
    ];
}

It will transform code as below

它将如下所示转换代码

import { Button } from '@alifd/next';

到

import Button from '@alifd/next/lib/button';
import '@alifd/next/lib/button/style';

🔗 Advanced 高级

🌈 Contributing 贡献

Contributing 贡献

📣 Join Group 加入小组

Use Dingtalk App scan the Qrcode to join in Dingtalk Group :

使用 Dingtalk App 扫描 Qrcode 加入 Dingtalk 小组:

https://github.com/alibaba-fusion/next

kunpeng9 / GTD2020-05-31