企业级中后台 UI 解决方案 Fusion Design

企业级中后台 UI 解决方案 Fusion Design

MIT
JavaScript
跨平台
阿里巴巴
2018-12-08
布达

Fusion Design 是一种旨在提升设计与开发之间 UI 构建效率的工作方式。通过建设基于 DPL 模式的,设计、前端之间的标准协议与工作流,来快速构建符合业务诉求的 DPL,提升 DPL 的构建效率和应用效率,帮助业务快速实现 UI 构建。通过 Fusion 可以帮你:

  • 能将原有构建一套 DPL 组件的过程从上百人日缩短到十人日以内

  • 能开发一套 DPL 组件,以配置化的方式适用于多品牌,多业务,多场景,从而满足业务不断快速试错的要求

  • 能将设计师和前端的协作流程打通,打破协作壁垒,让合作更加顺畅

  • 能将前端的 UI 编程能力透出给设计师,将设计师的的艺术表现力透出给前端,甚至将两者的能力透出给其他非专业同学使用

Next 是基于 Alibaba Fusion Design 的设计理念实现的一套 DPL 。配合 https://fusion.design 使用可以实现换肤的能力。基于 React 实现,支持所有现代浏览器和 IE9+。 

安装

1.使用 npm 安装(推荐)

npm install @alifd/next --save

2.浏览器直接引用

在浏览器中使用 script 和 link 标签直接引入文件,并使用全局变量 Next。我们在 npm 包中提供了 @alifd/next/dist 目录下的 next.js/next.min.js 和 next.css/next.min.css 等文件,也可以通过 unpkg 或者jsDelivr进行下载。jsDelivr网宿有合作,推荐大陆用户使用

引入

全量引入

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

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

按需引入

1.手动引入

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
    }]
  ]
}

主题切换

// package.json
{
  // ...
  buildConfig: [
    theme: '@alifd/theme-1' // 主题包名
  ]
}

webpack 中使用插件加载主题

{
  loader: '@alifd/next-theme-loader',
  options: {
    theme: '@alifd/theme-package', /*主题包名*/
  }
}

主题使用的示例demo 

加载中

评论(9)

sfidea
sfidea
这个和飞冰有什么差别?
忧郁的土豆
有angular版本吗,很想试试啊可惜不会react
布达 软件作者

引用来自“dreamans”的评论

和 ant.Design 有何明显差异?
最大的差异点在于UI的可定制能力,解决前端定制组件UI重构的问题,不需要再改UI代码。 这套组件因为要服务于整个阿里,所以在通用性方面会考虑的更多。
暮尘
暮尘
fusion design = 一套基础组件库 @alifd/next + 主题定制平台 https://fusion.design + 设计师工具 SketchFusion + 物料集散中心 算是一个体系。 要比较的话 也应该是 组件库 @alifd/next 和ant.design来比较。
s
suheme
ant.design.pro的生成器?
棱语曲
棱语曲
用过阿里飞冰里的,其实就是react的衍生物
helloclia
helloclia
蚂蚁的后代?
TGVvbmFyZA
TGVvbmFyZA

引用来自“dreamans”的评论

和 ant.Design 有何明显差异?
看起来像Ant.Design的设计工具
dreamans
dreamans
和 ant.Design 有何明显差异?

阿里 Fusion Design Next 1.11.6 发布,可配置组件库

Next 1.11.6 已发布,Next 是基于 Alibaba Fusion Design 的设计理念实现的一套 DPL ,配合 Fusion Design 使用可以实现换肤的能力。基于 React 实现,支持所有现代浏览器和 IE9+。 更新内容...

2018/12/27 07:56

没有更多内容

加载失败,请刷新页面

没有更多内容

暂无问答

30+ Free Settings Box, Option Panel PSD Designs

The first thing that clicks our mind when we talk about image editing and photo manipulation is Adobe Photoshop. Photoshop is such a great tool for image editing but on the othe...

2014/02/06 17:02
32
0
focus towards ray ban wayfarer the

ray ban wayfarer

2015/11/23 10:40
4
0
Mac入门 (二) 使用VMware Fusion虚拟机

有了Mac机,还是需在Mac上用Windows怎么办?, VMware Fusion 是运行在Mac机上的虚拟机软件, 类似于VMware workstation。 这样就可以在Mac上运行Windows 系统, 实现了Windows 和 Mac OS X平...

2015/07/04 21:56
252
0
Prestashop 免费模板

1. Matrice theme Prestashop 1.3.1 – 1.4.X just another template for Prestashop 1.3.1. As usual, simple clear and free!! also the installation is much easier thanks to your feed...

2013/03/15 00:00
447
0
苏州甲骨文内推

苏州甲骨文研发内推。招聘JAVA,C#,QA,Manager 若干。 要求至少2年以上工作经验,英文流利。 请将中英文简历发至1489347107@qq.com 如果需要详细信息,请联系1489347107...

2014/03/04 09:19
31
0
苏州甲骨文最新招聘职位 2014/10

苏州甲骨文最新内推职位。2014.10

2014/10/27 10:12
4
0
苏州甲骨文最新招聘职位

招人啦。 有会JAVA,C#,QA的速度。

2014/03/19 17:59
17
0
解决fedora 16 不支持MP3的方法

Configuration Installing Free and Nonfree Repositories We have two separate software repositories: free for Open Source Software (as defined by the Fedora Licensing Guidelines) ...

2012/05/24 12:20
166
0
怎样选择SSD?

SSD不同于传统的HDD机械硬盘,不需要通过移动磁盘头进行数据的读写操作,SSD由闪存(NAND)和控制芯片做成;目前用来生产固态硬盘的NAND Flash有三种,分别是单层式存储(SLC)、多层式存储(M...

2014/06/19 22:57
49
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部