English | 简体中文
一套企业级中后台UI的解决方案,致力于解决设计师与前端在工作协同、产品体验一致性、开发效率方面的问题
你可以通过一站式协作平台灵活地定制自己的DesignSystem,生成设计物料与代码分片到设计师的工具端 FusionCool 及开发者的工具端 Iceworks,同时保证代码和视觉稿之间的一致性
@alifd/next
配合 Fusion Design 解决在页面开发时设计师和前端协同的问题。通过这套体系设计师可以自由的定制组件的 UI 并产出一个 npm 主题包,前端可以直接使用这个主题包不需要关注组件的还原度问题。省去了和设计师反复的去做还原度 Review 的工作量,大幅度的提高了开发效率。
✔ | ✔ | ✔ | 9+ ✔ | ✔ | ✔ | ✔ |
npm install @alifd/next --save
在浏览器中使用 script 和 link 标签直接引入文件,并使用全局变量 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>
// 以上引入都是引入的最新版本 @alifd/next ,但我们推荐引入固定版本的next组件,以保证代码稳定
<script src="https://unpkg.com/@alifd/[email protected]/dist/next.min.js"></script>
// 或作为自己的静态资源引入
<script src="../build/public/@alifd/next.js"></script>
@alifd/next
基于react@16
开发,目前并不兼容react@16
以下的版本,且将 react/react-dom 作为 peerDependencies,需要用户手动提前安装或引入。@alifd/next
在处理日期时间相关组件逻辑时,使用了 moment 库,且将 moment 作为 peerDependencies,需要用户手动提前安装或引入。
import '@alifd/next/dist/next.css';
// import '@alifd/next/index.scss';
import { Button, Input } from '@alifd/next';
import Button from '@alifd/next/lib/button';
import '@alifd/next/lib/button/style';
2.使用 babel-plugin-import (推荐)
但大多数人更习惯的写法如下:
import { Button } from '@alifd/next';
通过 babel-plugin-import 插件,可以将上述代码转化为类似下面的代码:
import Button from '@alifd/next/lib/button';
import '@alifd/next/lib/button/style';
babel配置:
// webpack babel loader option or .babelrc
{
// ...
plugins: [
['babel-plugin-import', {
libraryName: '@alifd/next',
style: true
}]
]
}
扫码钉钉群 加入即刻交流与反馈: