Fusion Design 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
Fusion Design 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
Fusion Design 获得 2021 年度 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)
发表于大前端专区
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
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
15 评论
179 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部
返回顶部
顶部