当前位置：首页 > 软件库 > Web应用开发 > 网页组件 >

Fusion Design

企业级中后台 UI 解决方案

授权协议 MIT

开发语言 JavaScript

所属分类 Web应用开发、网页组件

软件类型开源软件

地区国产

投递者闾丘高峰

操作系统跨平台

开源组织阿里巴巴

适用人群未知

软件概览

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

使用案例

Fusion design from表单校验

Fusion design from表单校验最近项目中使用了fusion design,后台管理系统中最常用的就是table和form表单,众所周知，form表单的主要作用就是数据的获取，校验和设置，关于fusion中的form表单，先对校验做一下总结，方便日后项目中快速使用。常见的基础校验方式一：required:fromItem必填校验，可以用requiredMessage改变必填校验错
前端能力中台化之路———— Fusion Design 成长史

作者: 暮尘 2019年05月11日在上海举办 FDCON 2019。笔者有幸受到邀请，参与这次盛会。这篇文章就是演讲内容的文字提炼版。浅谈中台在开始正文内容之前，先简单聊聊“中台”这个词。首要要说的是“中台”这个词中台非常火，从去年下半年到现在，互联网届多家知名大公司都公布组织架构调整，纷纷表示要建立各种中台。另一方面，“中台”这个词暂时还没有一个很学术很权威的定义。笔者在知网搜索“中台
可配置组件库Fusion Design 了解一下

前不久那篇爆?的文章阿里重磅开源中后台UI解决方案 Fusion,相信大家很多人都看过。不少同学使用过 Fusion Design。 Fusion Design 整个体系还是比较庞大的。接下来笔者从一个小白的角度科普 Fusion Design. Fusion Design 体系 Fusion Design 主要就是4个组成部分组件库 @alifd/next Fusion站点 FusionCo
Fusion Design之Form组件源码分析1

From介绍请大家先导读Form组件使用和Field组件使用首先先明白一点,这是为了解决什么问题? 简化表单的操作,优美的布局,提供方法的api 如何进行数据存储的通过Filed组件,统一对数据进行管理,可以自己传,也可以不用传,内部已经定义好了. 在进行数据管理的时候,通过onChange方法与Filed数据管理之间进行数据传递 Form组件的api inline - 内联表单 cons
FusionDesign按钮获取值与显示方法

import React from 'react'; import ReactDOM from 'react-dom'; import { Input } from '@alifd/next'; import '@alifd/next/dist/next.css'; class Btn extends React.Component{ //定义props and state
fusion Design日期控件

官网： https://fusion.design/component/date-picker?themeid=2 import React from 'react'; import ReactDOM from 'react-dom'; import moment from 'moment'; import { DatePicker } from '@alifd/next'; im
如何抽离fusion design组件

如何抽离fusion站点组件步骤 1.脚手架 npm install create-react-app 2.所需包。。。 3.拉取fusion next开源仓库 https://github.com/alibaba-fusion/next 4.对代码进行修改

Fusion Design

安装

1.使用 npm 安装(推荐)

2.浏览器直接引用

引入

全量引入

按需引入

babel配置：

主题切换

同类工具

相关阅读

相关文章

相关问答

相关文档