UNPKG

7.96 kBMarkdownView Raw
1[English](./README.md) | 简体中文
2
3<p align="center">
4 <a href="https://fusion.design/">
5 <img alt="Fusion" src="https://img.alicdn.com/tfs/TB1YsoiHVzqK1RjSZFCXXbbxVXa-159-99.svg" width="200">
6 </a>
7</p>
8
9<p align="center">一套企业级中后台UI的解决方案,致力于解决设计师与前端在工作协同、产品体验一致性、开发效率方面的问题</p>
10
11---
12
13<p align="center">
14 <a href="https://www.npmjs.org/package/@alifd/next"><img src="https://img.shields.io/npm/v/@alifd/next.svg"></a>
15 <a href="https://www.npmjs.org/package/@alifd/next"><img src="https://img.shields.io/npm/dm/@alifd/next.svg"></a>
16 <a href="https://codecov.io/gh/alibaba-fusion/next"><img src="https://codecov.io/gh/alibaba-fusion/next/branch/master/graph/badge.svg?token=FSufKVDhmT"></a>
17 <a href="https://travis-ci.com/alibaba-fusion/next"><img src="https://travis-ci.com/alibaba-fusion/next.svg?token=KAYresHL1UPaaLzUYyx6&branch=master"></a>
18 <a href="http://makeapullrequest.com"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg"></a>
19 <a href="https://github.com/alibaba-fusion/next/blob/master/LICENSE"><img src="https://img.shields.io/badge/license-MIT-brightgreen.svg"></a>
20</p>
21
22你可以通过[一站式协作平台](https://fusion.design)灵活地定制自己的 DesignSystem,生成设计物料与代码分片到设计师的工具端 [FusionCool](https://fusion.design/tool?from=github) 及开发者的工具端 [Iceworks](https://fusion.design/tool?from=github),同时保证代码和视觉稿之间的一致性
23
24![howtouse](https://img.alicdn.com/tfs/TB1dF3BH4TpK1RjSZFMXXbG_VXa-1280-720.gif)
25
26# 🤔 为什么用
27
28`@alifd/next` 配合 [Fusion Design](https://fusion.design) 解决在页面开发时设计师和前端协同的问题。通过这套体系设计师可以自由的定制组件的 UI 并产出一个 npm 主题包,前端可以直接使用这个主题包不需要关注组件的还原度问题。省去了和设计师反复的去做还原度 Review 的工作量,大幅度的提高了开发效率。
29
30![](https://img.alicdn.com/tfs/TB1MDP6GSzqK1RjSZFpXXakSXXa-1278-458.png)
31
32# 💻 浏览器支持
33
34| ![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) |
35| :--------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------: | :--------------------------------------------------------------------------: |
36| ✔ | ✔ | ✔ | 9+ ✔ | ✔ | ✔ | ✔ |
37
38# 🚀 快速开始
39
40## 🛠 安装
41
42### 1.使用 npm 安装(推荐)
43
44```
45npm install @alifd/next --save
46```
47
48### 2.浏览器直接引用
49
50在浏览器中使用 script 和 link 标签直接引入文件,并使用全局变量 Next。我们在 npm 包中提供了 `@alifd/next/dist` 目录下的 next.js/next.min.js 和 next.css/next.min.css 等文件,也可以通过 [unpkg](https://unpkg.com/@alifd/next/dist/) 进行下载。
51
52```html
53<link rel="stylesheet" href="https://unpkg.com/@alifd/next/dist/next.css" />
54
55<script src="https://unpkg.com/@alifd/next/dist/next.js"></script>
56
57// 以上引入都是引入的最新版本 @alifd/next
58,但我们推荐引入固定版本的next组件,以保证代码稳定
59<script src="https://unpkg.com/@alifd/next@1.8.6/dist/next.min.js"></script>
60
61// 或作为自己的静态资源引入
62<script src="../build/public/@alifd/next.js"></script>
63```
64
65## ☔️ 依赖
66
67- `@alifd/next` 基于 `react@16` 开发,目前并不兼容 `react@16` 以下的版本,且将 react/react-dom 作为 peerDependencies,需要用户手动提前安装或引入。
68- `@alifd/next` 在处理日期时间相关组件逻辑时,使用了 [moment](https://github.com/moment/moment) 库,且将 moment 作为 peerDependencies,需要用户手动提前安装或引入。
69
70## 🎯 引入
71
72### 全量引入
73
74```js
75// 全量引入压缩后的next基础样式
76import '@alifd/next/dist/next.min.css';
77
78import { Button, Input } from '@alifd/next';
79```
80
81- 优点:使用简单, 样式无需编译直接使用
82- 缺点:当前页面未使用的组件也会被打包
83
84**Note:** 如果引入 scss 版本的样式,`import '@alifd/next/index.scss';`,在 webpack 打包时请使用`fast-sass-loader`,否则编译出来的样式文件可能会很大。
85原因是`@alifd/next`内部,组件之间存在依赖关系,例如 Icon 组件被 Menu 组件依赖。对于 webpack 来讲,在分析依赖阶段,Menu 的 index.scss 和 Icon 的 index.scss 是两个不同的模块,两个文件会独立的在 sass-loader 阶段编译。因此 Icon 的 sass 会被重复编译。使用`fast-sass-loader`可以避免样式重复打包的问题。
86
87### 按需引入
88
89#### 1.手动引入
90
91```js
92import Button from '@alifd/next/lib/button';
93import '@alifd/next/lib/button/style';
94```
95
96- 优点:按需引入 js 代码、样式代码,不会加载不必要的组件
97- 缺点:使用起来过于繁琐,需要手动添加每一个用到的组件 js 代码及样式
98
99#### 2.使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐)
100
101通过 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 插件,可以将下面的代码
102
103```js
104import { Button } from '@alifd/next';
105```
106
107转化为类似下面的代码:
108
109```js
110import Button from '@alifd/next/lib/button';
111import '@alifd/next/lib/button/style';
112```
113
114babel 配置:
115
116```js
117// webpack babel loader option or .babelrc
118{
119 // ...
120 plugins: [
121 [
122 'import',
123 {
124 libraryName: '@alifd/next',
125 style: true,
126 },
127 ],
128 ];
129}
130```
131
132## 🔗 高级用法
133
134- [使用主题包](./site/zh-cn/theme.md)
135- [国际化](./site/zh-cn/i18n.md)
136- [字体文件私有化部署](./site/zh-cn/font-deploy.md)
137
138
139## 🌈 贡献代码
140推荐在线编辑:使用 Gitpod, 一个源自 GitHub 的免费在线代码编辑工具:
141
142[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/alibaba-fusion/next)
143
144具体步骤可参考:
145- [贡献代码](./site/zh-cn/contributing.md)
146
147## 📣 加入社区
148
149扫码*钉钉群* 加入即刻交流与反馈:
150
151<img alt="Join the chat at dingtalk" src="https://img.alicdn.com/tfs/TB1r2GoU6DpK1RjSZFrXXa78VXa-620-818.png" width="300">