Skip to content

Commit

Permalink
fix(Menu),docs(*): add theme docs, close #629 (#634)
Browse files Browse the repository at this point in the history 
* docs(*): add theme docs, close #629

* fix(Menu): empty focus key when blur using undefined
  • Loading branch information
@youluna @tao1991123
youluna authored and tao1991123 committed May 8, 2019
1 parent ff8b951 commit 8c6a3af
Show file tree
Hide file tree
Showing 3 changed files with 139 additions and 99 deletions.
77 changes: 43 additions & 34 deletions README.zh-cn.md
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
[English](./README.md) | 简体中文

<p align="center">
<a href="https://fusion.design/">
<img alt="Fusion" src="https://img.alicdn.com/tfs/TB1YsoiHVzqK1RjSZFCXXbbxVXa-159-99.svg" width="200">
</a>
</p>


<p align="center">一套企业级中后台UI的解决方案，致力于解决设计师与前端在工作协同、产品体验一致性、开发效率方面的问题</p>

---
Expand All @@ -19,11 +19,10 @@
<a href="https://github.com/alibaba-fusion/next/blob/master/LICENSE"><img src="https://img.shields.io/badge/license-MIT-brightgreen.svg"></a>
</p>

你可以通过[一站式协作平台](https://fusion.design)灵活地定制自己的DesignSystem，生成设计物料与代码分片到设计师的工具端 [FusionCool](https://fusion.design/tool?from=github) 及开发者的工具端 [Iceworks](https://fusion.design/tool?from=github)，同时保证代码和视觉稿之间的一致性
你可以通过[一站式协作平台](https://fusion.design)灵活地定制自己的 DesignSystem，生成设计物料与代码分片到设计师的工具端 [FusionCool](https://fusion.design/tool?from=github) 及开发者的工具端 [Iceworks](https://fusion.design/tool?from=github)，同时保证代码和视觉稿之间的一致性

![howtouse](https://img.alicdn.com/tfs/TB1dF3BH4TpK1RjSZFMXXbG_VXa-1280-720.gif)


# 🤔 为什么用

`@alifd/next` 配合 [Fusion Design](https://fusion.design) 解决在页面开发时设计师和前端协同的问题。通过这套体系设计师可以自由的定制组件的 UI 并产出一个 npm 主题包，前端可以直接使用这个主题包不需要关注组件的还原度问题。省去了和设计师反复的去做还原度 Review 的工作量，大幅度的提高了开发效率。
Expand All @@ -32,11 +31,9 @@

# 💻 浏览器支持

![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![UC](https://raw.github.com/alrra/browser-logos/master/src/uc/uc_48x48.png)
:---: | :---: | :---: | :---: | :---: | :---: | :---:
✔ | ✔ | ✔ | 9+ ✔ | ✔ | ✔ | ✔


| ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![UC](https://raw.github.com/alrra/browser-logos/master/src/uc/uc_48x48.png) |
| :--------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------: | :--------------------------------------------------------------------------: |
| ✔ | ✔ | ✔ | 9+ ✔ | ✔ | ✔ | ✔ |

# 🚀 快速开始

Expand All @@ -52,12 +49,13 @@ npm install @alifd/next --save

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

``` html
<link rel="stylesheet" href="https://unpkg.com/@alifd/next/dist/next.css">
```html
<link rel="stylesheet" href="https://unpkg.com/@alifd/next/dist/next.css" />

<script src="https://unpkg.com/@alifd/next/dist/next.js"></script>

// 以上引入都是引入的最新版本 @alifd/next ，但我们推荐引入固定版本的next组件，以保证代码稳定
// 以上引入都是引入的最新版本 @alifd/next
，但我们推荐引入固定版本的next组件，以保证代码稳定
<script src="https://unpkg.com/@alifd/[email protected]/dist/next.min.js"></script>

// 或作为自己的静态资源引入
Expand All @@ -66,68 +64,79 @@ npm install @alifd/next --save

## ☔️ 依赖

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

## 🎯 引入

### 全量引入


``` js
import '@alifd/next/dist/next.css';
// import '@alifd/next/index.scss';
```js
// 全量引入压缩后的next基础样式
import '@alifd/next/dist/next.min.css';

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

### 按需引入
- 优点：使用简单, 样式无需编译直接使用
- 缺点：当前页面未使用的组件也会被打包

**Note:** 如果引入 scss 版本的样式，`import '@alifd/next/index.scss';`，在 webpack 打包时请使用`fast-sass-loader`，否则编译出来的样式文件可能会很大。
原因是`@alifd/next`内部，组件之间存在依赖关系，例如 Icon 组件被 Menu 组件依赖。对于 webpack 来讲，在分析依赖阶段，Menu 的 index.scss 和 Icon 的 index.scss 是两个不同的模块，两个文件会独立的在 sass-loader 阶段编译。因此 Icon 的 sass 会被重复编译。使用`fast-sass-loader`可以避免样式重复打包的问题。

### 按需引入

#### 1.手动引入

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

- 优点：按需引入 js 代码、样式代码，不会加载不必要的组件
- 缺点：使用起来过于繁琐，需要手动添加每一个用到的组件 js 代码及样式

#### 2.使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐)

但大多数人更习惯的写法如下：
通过 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 插件，可以将下面的代码

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

通过 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 插件，可以将上述代码转化为类似下面的代码：
转化为类似下面的代码：

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

babel配置：
``` js
babel 配置：

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



## 🔗 高级用法

- [使用主题包](./site/zh-cn/theme.md)
- [国际化](./site/zh-cn/i18n.md)
- [字体文件私有化部署](./site/zh-cn/font-deploy.md)

## 🌈 贡献代码

- [贡献代码](./site/zh-cn/contributing.md)

## 📣 加入社区
Expand Down
159 changes: 95 additions & 64 deletions site/zh-cn/theme.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
# 使用主题包

如果默认的组件主题样式无法满足你的视觉需求，那么你可以通过 Fusion Design 提供的强大的样式配置能力配置自定义的主题样式包。该主题包(包名例如取 `@alifd/theme-xxx` )可以在平台上导出发布至npm，它的本质是一个 scss 变量包，配合`@alifd/next`共同使用。
如果默认的组件主题样式无法满足你的视觉需求，那么你可以通过 Fusion Design 提供的强大的样式配置能力配置自定义的主题样式包。该主题包(包名例如取 `@alifd/theme-xxx` )可以在平台上导出发布至 npm，它的本质是一个 scss 变量包，配合`@alifd/next`共同使用。

**Note:** 使用主题包时，请务必保证 “项目依赖的 next 组件版本” 与 “主题包依赖的 next 组件版本” 一致(至少到 minor 版本一致)，以防止 js/css 因版本不匹配导致的潜在问题

- 项目依赖的 next 组件版本：node_modules 中，项目真正使用的版本
- 主题包依赖的 next 组件版本：查看发布的主题包 package.json 的 dependencies 中`@alifd/next`的版本，例如 https://unpkg.com/@alifd/theme-1/package.json

如果不匹配(minor 不同)，请去往[配置平台](https://fusion.design/)发布主题。

## 安装

Expand All @@ -12,81 +19,105 @@ npm install @alifd/theme-xxx --save

### 全量引入

``` js
import '@alifd/theme-xxx/index.scss';

```js
// 直接使用主题包中预编译生成的 css 文件
import '@alifd/theme-xxx/dist/next.css';

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

**Note:** 如果你使用的是主题包中预编译生成的 css 文件，请保证 “项目依赖的next组件版本” 与 “主题包依赖的next组件版本” 一致，以防止 js/css 因版本不匹配导致的潜在问题

### 按需引入

除使用在《快速开始》一节中提到的 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 外，还需搭配 [@alifd/next-theme-loader](https://github.com/alibaba-fusion/next-theme-loader) 和 [@alifd/next-theme-webpack-plugin](https://github.com/alibaba-fusion/next-theme-webpack-plugin)，可参考如下 webpack 配置：
@alifd/next-theme-loader 用来处理单个组件的样式问题，@alifd/next-theme-webpack-plugin 用来处理

```bash
npm install @alifd/next-theme-webpack-plugin fast-sass-loader @alifd/next-theme-loader
```

``` js
```js
const path = require('path');
const webpack = require('webpack');
const ThemePlugin = require('@alifd/next-theme-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
entry: {
index: './src/index.jsx'
},
output: {
path: path.join(__dirname, 'build'),
filename: '[name].js'
},
resolve: {
extensions: ['.js', '.jsx']
},
devtool: 'inline-source-map',
module: {
rules: [{
test: /\.jsx?$/,
use: {
loader: 'babel-loader',
options: {
presets: [
'env',
'react',
'stage-0'
],
plugins: [
'add-module-exports',
'transform-decorators-legacy',
['babel-plugin-import', { style: true }]
]
}
},
exclude: /node_modules/
}, {
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader'
})
}, {
test: /\.scss$/,
use: ExtractTextPlugin.extract({
use: [
'css-loader',
'fast-sass-loader',
{
// 添加 @alifd/next-theme-loader，引入自定义主题样式对应的 scss 变量
loader: '@alifd/next-theme-loader',
options: {
theme: '@alifd/theme-xxx'
}
}
]
})
}]
},
plugins: [
// 添加 @alifd/next-theme-webpack-plugin，引入 normalize 样式以及自定义 icon 定义
new ThemePlugin({ theme: '@alifd/theme-xxx' }),
new ExtractTextPlugin('[name].css')
]
entry: {
index: './src/index.jsx',
},
output: {
path: path.join(__dirname, 'build'),
filename: '[name].js',
},
resolve: {
extensions: ['.js', '.jsx'],
},
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.jsx?$/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'react', 'stage-0'],
plugins: [
'add-module-exports',
'transform-decorators-legacy',
['babel-plugin-import', { style: true }],
],
},
},
exclude: /node_modules/,
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader',
}),
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
use: [
'css-loader',
'fast-sass-loader',
{
// 添加 @alifd/next-theme-loader，引入自定义主题样式对应的 scss 变量
loader: '@alifd/next-theme-loader',
options: {
theme: '@alifd/theme-xxx',
// 基准包，默认是@alifd/next
base: '@alifd/next',
// 注入变量，来编译组件样式
// 支持 Object 和 String ， 如果是 String 请写绝对路径 例如: modifyVars: path.join(__dirname, 'variable.scss')
// 以下为Object
modifyVars: {
'$css-prefix': '"myprefix-"',
},
},
},
],
}),
},
],
},
plugins: [
// 添加 @alifd/next-theme-webpack-plugin，引入 normalize 样式以及自定义 icon 定义
new ThemePlugin({
theme: '@alifd/theme-xxx',
// 基准包，默认是@alifd/next
libraryName: '@alifd/next',
// 是否将内置的normalize样式添加到最终的样式包中，默认为true
prependNormalizeCSS: true,
// 注入变量，来编译normalize和icon样式
// 支持 Object 和 String ， 如果是 String 请写绝对路径 例如: modifyVars: path.join(__dirname, 'variable.scss')
// 以下为Object
modifyVars: {
'$css-prefix': '"myprefix-"',
},
}),
new ExtractTextPlugin('[name].css'),
],
};
```
2 changes: 1 addition & 1 deletion src/menu/view/menu.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,7 @@ export default class Menu extends Component {

onBlur(e) {
this.setState({
focusedKey: '',
focusedKey: undefined,
});

this.props.onBlur && this.props.onBlur(e);
Expand Down

0 comments on commit 8c6a3af

Please sign in to comment.