@alifd/next

Next

@alifd/next 是 Fusion Design 中的面向 PC 端组件体系，支持所有现代浏览器和 IE9+，主要服务于中后台业务场景。

安装

使用 npm 安装

npm install @alifd/next --save

浏览器直接引用

在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 Next。我们在 npm 包中提供了 @alifd/next/dist 目录下的 next.js/next.min.js 和 next.css/next.min.css 等文件，也可以通过 unpkg 进行下载。

<link rel="stylesheet" href="//xxx.cdn.com/next.css">

<script src="//xxx.cdn.com/next.js"></script>

依赖

• @alifd/next 基于 react@16 开发，目前并不兼容 react@16 以下的版本，且将 react/react-dom 作为 peerDependencies，需要用户手动提前安装或引入。
• @alifd/next 在处理日期时间相关组件逻辑时，使用了 moment 库，且将 moment 作为 peerDependencies，需要用户手动提前安装或引入。

引入

全量引入

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

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

按需引入

使用 babel-plugin-import

// webpack babel loader option or .babelrc
{
  // ...
  plugins: [
    ['babel-plugin-import', {
      libraryName: '@alifd/next',
      style: true
    }]
  ]
}

可以将如下代码：

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

转化为类似下面的代码：

import Button from '@alifd/next/lib/button';
import '@alifd/next/lib/button/style';

手动引入

import Button from '@alifd/next/lib/button';
import '@alifd/next/lib/button/style';

问题反馈

目前 @alifd/next 还未开源，如果你在使用过程中遇到任何问题，可以到我们的 github 项目 中进行反馈，我们会进行及时的修复和支持。

我们预计会在接下来的 9 月份进行组件代码的正式开源以及组件样式配置能力的开放，敬请期待。