Fusion Design 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Fusion Design 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
Fusion Design 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
Fusion Design 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
Fusion Design 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !
授权协议 MIT
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发网页组件
开源组织 阿里巴巴
地区 国产
投 递 者 布达
适用人群 未知
收录时间 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 

展开阅读全文

代码

评论 (15)

加载中
妈的。。。 我今天才知道有这个!
2019/05/16 16:59
回复
举报
什么时候这个项目挂掉?
2019/03/27 09:27
回复
举报
不会挂,集团内部大量使用……
2019/11/21 01:20
回复
举报
如果说next是可配置的组件库,更偏向于通用性。那能不能把antdesign作为一个物料库,然后通过主站配置主题呢?
2019/03/09 21:03
回复
举报
布达软件作者
关于 fusion design 的详细介绍,大家可以看这篇博文。 https://zhuanlan.zhihu.com/p/53117538
2019/02/12 10:21
回复
举报
这个和飞冰有什么差别?
2018/12/27 10:08
回复
举报
有angular版本吗,很想试试啊可惜不会react
2018/12/25 23:35
回复
举报
布达软件作者

引用来自“dreamans”的评论

和 ant.Design 有何明显差异?
最大的差异点在于UI的可定制能力,解决前端定制组件UI重构的问题,不需要再改UI代码。 这套组件因为要服务于整个阿里,所以在通用性方面会考虑的更多。
2018/12/24 16:14
回复
举报
fusion design = 一套基础组件库 @alifd/next + 主题定制平台 https://fusion.design + 设计师工具 SketchFusion + 物料集散中心 算是一个体系。 要比较的话 也应该是 组件库 @alifd/next 和ant.design来比较。
2018/12/17 13:15
回复
举报
ant.design.pro的生成器?
2018/12/16 17:32
回复
举报
用过阿里飞冰里的,其实就是react的衍生物
2018/12/16 16:57
回复
举报
更多评论
发表于大前端专区
2018/12/27 07:56

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

Next 1.11.6 已发布,Next 是基于 Alibaba Fusion Design 的设计理念实现的一套 DPL ,配合 Fusion Design 使用可以实现换肤的能力。基于 React 实现,支持所有现代浏览器和 IE9+。 更新内容: Cascader: keyboard not blur (3e43e6a) Pagination: select dropdown menu position error on scrolling (70375c1) Tab: can not render when child have null item (fb20367) Tab, Grid: inconsistency between doc and code (5145...

13
12
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
2019/12/29 07:31

前端能力中台化之路—Fusion Design 成长史

作者:@暮尘,阿里巴巴国际用户体验事业部 高级前端工程师,阿里巴巴开源项目Fusion Design & FIE 核心开发者 浅谈中台 在开始正文内容之前,先简单聊聊“中台”这个词。 首要要说的是“中台”这个词中台非常火,从去年下半年到现在,互联网届多家知名大公司都公布组织架构调整,纷纷表示要建立各种中台。 另一方面,“中台”这个词暂时还没有一个很学术很权威的定义。笔者在知网搜索“中台”,前8页都没有看到任何一家商学院或者经管...

0
0
发表了博客
2014/09/08 00:53

Fusion level00

1.if(realpath(path, resolved) == NULL) return 1; // can't access path. will error trying to open 就算path不存在,resolved也会被赋值成path 记错了,想成path不存在resolved就会赋值NULL,搞得我一直在构造特殊路径 PS:python或者perl可以构造特殊路径和文件,比如 install -d `python -c 'print "\x90"*90'`   但是要注意如果shellcode中有/,那么就会生成多个目录 2.原本的想法是 python -c '...

0
0
发表了博客
2020/03/30 09:21

Mac虚拟机 VMware Fusion

尝试了Oracle免费开源的Virtual Box后, 还是习惯用VMware Fusion来在Mac上安装虚拟机 VMware Fusion官网: http://www.vmware.com/cn 下载页面: http://www.vmware.com/products/fusion/fusion-evaluation.html 目前最新版本是VMware Fusion 8, 下载下来的文件名称为: VMware-Fusion-8.1.0-3272237.dmg, 362MB 拷贝到Mac中, 双击即可进行安装 注册机: 网上有注册机可下, 下载到Windows下, 是如右边所示的三个文件夹; 将其拷贝到M...

0
0
发表了博客
2020/11/07 13:29

Fusion computer安装问题

在vmware中安装FusionComputer 6.5.1 CAN注意事项 电脑的运行内存必须8G以上否则难以启动 VMWARE分配虚拟机内存最少5G 硬盘空间最少100G 硬盘要使用IDE类型非scci盘 Cpu虚拟化要勾选VT-X 用FusionComputer installer 安装VRM是遇到的几点错误解决方法 如果提示CAN节点无法连接主机 关闭PC防火墙即可 如果提示无法查询到数据库时 关闭安装删除已安装配置进行重新安装即可 在vmware中安装FusionComputer 6.5.1 VRM 注意事项 电脑内...

0
0
发表于大前端专区
2016/10/21 21:52

Fusion charts List

http://www.fusioncharts.com/dev/getting-started/list-of-charts.html

0
0
发表了博客
2020/07/09 07:36

VMware Fusion下Centos联网

1.VMware Fusion设置选择“网络适配器” 2.“连接我的网络适配器”选择“与我的mac共享” 3.编辑centos的ip配置文件 [root@Centos ~]# more /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0 TYPE=Ethernet UUID=135a7471-b220-4c9b-ad21-f740e2a5b196 ONBOOT=yes NM_CONTROLLED=yes BOOTPROTO=dhcp HWADDR=00:0C:29:95:F9:AD #IPADDR=192.168.68.100 PREFIX=20 #GATEWAY=92.168.68.1 DEFROUTE=yes IPV4_FAILURE_FATA...

0
0
2020/04/13 09:49

VMware Fusion 静态ip

撸了今年阿里、头条和美团的面试,我有一个重要发现.......>>> VMnet8是NAT模式的默认网卡,所以先看下它的一些设置。 在/Library/Preferences/VMware Fusion/vmnet8文件夹下找到dhcpd.conf文件,查看此文件. 将会看到这样一段内容,它描述了通过DHCP分配ip地址的设置 # Written at: 10/13/2017 20:31:38 allow unknown-clients; default-lease-time 1800; # default is 30 minutes max-lease-time 7200; ...

0
0
发表了博客
2019/06/15 11:43

vins_fusion学习笔记

Vins-Fusion源码:https://github.com/HKUST-Aerial-Robotics/VINS-Fusion 摘要 应项目需要,侧重学习stereo+gps融合 转载几篇写的比较好的博客 1. 萌新学VINS-Fusion(三)------双目和GPS融合 主函数文件 与GPS融合的程序入口在KITTIGPSTest.cpp文件中,数据为KITTI数据集 数据集为 http://www.cvlibs.net/datasets/kitti/raw_data.php 以 [2011_10_03_drive_0027_synced]为例 https://s3.eu-central-1.amazonaws.com/avg-ki...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
15 评论
175 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部