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

点击右上方，关注开源中国OSC头条 ，获取最新技术资讯

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

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 。

↓↓↓