{{ post.title }} {{ post.meta.chinese }}
+{{ post.toc }}
{{ post.html|add_anchor }}
-
-
-
-
-
100%
diff --git a/components/modal/Modal.jsx b/components/modal/Modal.jsx
new file mode 100644
index 000000000000..5726b963284d
--- /dev/null
+++ b/components/modal/Modal.jsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import Dialog from 'rc-dialog';
+import { Dom } from 'rc-util';
+import Button from '../button';
+
+function noop() {}
+
+let mousePosition;
+let mousePositionEventBinded;
+
+let AntModal = React.createClass({
+ getDefaultProps() {
+ return {
+ prefixCls: 'ant-modal',
+ onOk: noop,
+ onCancel: noop,
+ okText: '确定',
+ cancelText: '取消',
+ width: 520,
+ transitionName: 'zoom',
+ maskAnimation: 'fade',
+ confirmLoading: false,
+ visible: false
+ };
+ },
+
+ handleCancel() {
+ this.props.onCancel();
+ },
+
+ handleOk() {
+ this.props.onOk();
+ },
+
+ componentDidMount() {
+ if (mousePositionEventBinded) {
+ return;
+ }
+ // 只有点击事件支持从鼠标位置动画展开
+ Dom.addEventListener(document.body, 'click', function onDocumentMousemove(e) {
+ mousePosition = {
+ x: e.pageX,
+ y: e.pageY
+ };
+ // 20ms 内发生过点击事件，则从点击位置动画展示
+ // 否则直接 zoom 展示
+ // 这样可以兼容非点击方式展开
+ setTimeout(() => mousePosition = null, 20);
+ });
+ mousePositionEventBinded = true;
+ },
+
+ render() {
+ let props = this.props;
+ let defaultFooter = [
+ ,
+
+ ];
+ let footer = props.footer || defaultFooter;
+ return (
+
+ );
+ }
+});
+
+export default AntModal;
diff --git a/components/modal/confirm.jsx b/components/modal/confirm.jsx
index a619185f3ec2..28f95931dbdb 100644
--- a/components/modal/confirm.jsx
+++ b/components/modal/confirm.jsx
@@ -1,6 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
-import Dialog from './index';
+import Dialog from './Modal';
import Icon from '../icon';
import Button from '../button';
import objectAssign from 'object-assign';
diff --git a/components/modal/index.jsx b/components/modal/index.jsx
index 860fb01205c8..c8ad51a0ac9f 100644
--- a/components/modal/index.jsx
+++ b/components/modal/index.jsx
@@ -1,82 +1,6 @@
-import React from 'react';
-import Dialog from 'rc-dialog';
-import { Dom } from 'rc-util';
-import objectAssign from 'object-assign';
+import AntModal from './Modal';
import confirm from './confirm';
-import Button from '../button';
-
-function noop() {}
-
-let mousePosition;
-let mousePositionEventBinded;
-
-let AntModal = React.createClass({
- getDefaultProps() {
- return {
- prefixCls: 'ant-modal',
- onOk: noop,
- onCancel: noop,
- okText: '确定',
- cancelText: '取消',
- width: 520,
- transitionName: 'zoom',
- maskAnimation: 'fade',
- confirmLoading: false,
- visible: false,
- closable: true,
- };
- },
-
- handleCancel() {
- this.props.onCancel();
- },
-
- handleOk() {
- this.props.onOk();
- },
-
- componentDidMount() {
- if (mousePositionEventBinded) {
- return;
- }
- // 只有点击事件支持从鼠标位置动画展开
- Dom.addEventListener(document.body, 'click', function onDocumentMousemove(e) {
- mousePosition = {
- x: e.pageX,
- y: e.pageY
- };
- // 20ms 内发生过点击事件，则从点击位置动画展示
- // 否则直接 zoom 展示
- // 这样可以兼容非点击方式展开
- setTimeout(() => mousePosition = null, 20);
- });
- mousePositionEventBinded = true;
- },
-
- render() {
- let props = this.props;
- let defaultFooter = [
- ,
-
- ];
- let footer = props.footer || defaultFooter;
- return (
-
- );
- }
-});
+import objectAssign from 'object-assign';
AntModal.info = function (props) {
const config = objectAssign({}, props, {
diff --git a/components/select/index.md b/components/select/index.md
index df41f3f47a28..a6a2892327e7 100644
--- a/components/select/index.md
+++ b/components/select/index.md
@@ -32,7 +32,6 @@
| onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | 无 |
| onDeselect | 取消选中时调用，参数为选中项的 option value 值，仅在 multiple 或 tags 模式下生效 | function(value, option) | 无 |
| onChange | 选中option，或input的value变化(combobox 模式下)时，调用此函数 | function(value, label) | 无 |
-| allowClear | 显示清除按钮 | boolean | false |
| onSearch | 文本框值变化时回调 | function(value: String) | |
| placeholder | 选择框默认文字 | string | 无 |
| searchPlaceholder | 搜索框默认文字 | string | 无 |
diff --git a/components/transfer/list.jsx b/components/transfer/list.jsx
index a8fa4b9793d7..bc5c66fb1e8a 100644
--- a/components/transfer/list.jsx
+++ b/components/transfer/list.jsx
@@ -81,6 +81,22 @@ class TransferList extends Component {
[prefixCls + '-with-footer']: !!footerDom,
});
+ const showItems = dataSource.map((item) => {
+ // apply filter
+ const itemText = this.props.render(item);
+ const filterResult = this.matchFilter(itemText, filter);
+ const renderedText = this.props.render(item);
+
+ if (filterResult) {
+ return (
+
@@ -89,50 +105,18 @@ class TransferList extends Component {
checked: checkStatus === 'all',
checkPart: checkStatus === 'part',
checkable:
- })}
-
-
- {
- (checkedKeys.length > 0 ? checkedKeys.length + '/' : '') + dataSource.length
- } 条
-
- {titleText}
-
+ })}{(checkedKeys.length > 0 ? checkedKeys.length + '/' : '') + dataSource.length} 条
+ {titleText}
{ bodyDom ? bodyDom :
-
+
{ showSearch ?
- {dataSource.length > 0 ?
- dataSource.map((item) => {
- // apply filter
- const itemText = this.props.render(item);
- const filterResult = this.matchFilter(itemText, filter);
-
- const renderedText = this.props.render(item);
-
- if (filterResult) {
- return (
-
- key === item.key)} />
- {renderedText}
-
- );
- }
- }) :
}
{ footerDom ?
-
: null }
Not Found
- }
+ {showItems.length > 0 ? showItems : Not Found
}
diff --git a/components/transfer/search.jsx b/components/transfer/search.jsx
index c49c61944a0a..c2061641ad7e 100644
--- a/components/transfer/search.jsx
+++ b/components/transfer/search.jsx
@@ -12,16 +12,19 @@ class Search extends Component {
this.props.onChange(e);
}
+ handleClear(e) {
+ e.preventDefault();
+ this.props.handleClear(e);
+ }
+
render() {
const { placeholder, value, prefixCls } = this.props;
return (
-, document.getElementById('spec-layout-demo-aside'));
+, mountNode);
````
````css
diff --git a/spec/layout/demo/ceiling.md b/docs/spec/layout/demo/ceiling.md
similarity index 96%
rename from spec/layout/demo/ceiling.md
rename to docs/spec/layout/demo/ceiling.md
index 8c7911535f95..9675c8fd7ffa 100644
--- a/spec/layout/demo/ceiling.md
+++ b/docs/spec/layout/demo/ceiling.md
@@ -32,7 +32,7 @@ ReactDOM.render(
-
{ value && value.length > 0 ?
-
+
- ,
- mountNode
-);
-````
-
-````css
-#components-upload-demo-drag-simple {
- width: 246px;
- height: 146px;
-}
-````
diff --git a/components/upload/demo/drag.md b/components/upload/demo/drag.md
index de230a4d7fbd..5932e07df6f3 100644
--- a/components/upload/demo/drag.md
+++ b/components/upload/demo/drag.md
@@ -13,23 +13,25 @@ const Dragger = Upload.Dragger;
const props = {
name: 'file',
showUploadList: false,
- action: '/upload.do'
+ action: '/upload.do',
};
ReactDOM.render(
-
- ,
- mountNode
-);
-````
-
-````css
-#components-upload-demo-drag {
- height: 180px;
-}
+
+
+
+
+
+
+
, mountNode);
````
+
+````css
+/* 加几行样式将上传项变成平铺样式 */
+.upload-list-inline .ant-upload-list-item {
+ display: inline-block;
+ width: 200px;
+ margin-right: 8px;
+}
+````
diff --git a/components/upload/index.md b/components/upload/index.md
index f490a4ce38e6..bcbbcbf73eba 100644
--- a/components/upload/index.md
+++ b/components/upload/index.md
@@ -24,7 +24,7 @@
| action | 必选参数, 上传的地址 | String | 无 |
| data | 可选参数, 上传所需参数 | Object | 无 |
| showUploadList | 可选参数, 是否展示 uploadList, 默认开启 | Boolean | true |
-| multiple | 可选参数, 是否支持多选文件，支持 `ie10+` | Boolean | false |
+| multiple | 可选参数, 是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件。 | Boolean | false |
| accept | 可选参数, 接受上传的文件类型, 详见 input accept Attribute | String | 无 |
| beforeUpload | 可选参数, 上传文件之前的钩子，参数为上传的文件，若返回 `false` 或者 Promise 则停止上传。**注意：该方法不支持老 IE**。 | Function | 无 |
| onChange | 可选参数, 上传文件改变时的状态，详见 onChange | Function | 无 |
diff --git a/docs/pattern/advanced-search.md b/docs/pattern/advanced-search.md
new file mode 100644
index 000000000000..2ab95c7424c7
--- /dev/null
+++ b/docs/pattern/advanced-search.md
@@ -0,0 +1,56 @@
+# 高级搜索
+
+- category: 6
+- order: 6
+
+---
+
+借助『高级搜索』，用户可以缩小复杂列表／表格等的展示范围。
+
+## 常规型
+
+### 交互
+
+
+
+常规型常和表格搭配使用，适合在搜索条件多以及搜索值个数不确定的场景中。
+
+『高级搜索』功能一般开放给中间用户／专家用户使用，一般通过点击『高级搜索』触发；如果非常高频使用，可以默认展开『高级搜索』。
+
+
+ +
+
+当已经输入了值的『高级搜索』被隐藏时，需要展示检索条件和值。
+
+### 排列规则
+
+
+
+搜索条件的排布顺序需要和表格中的标题顺序，尽可能保持一致；如果非常高频使用的搜索条件，可以放在最前面。
+
+### 规格
+
+
+
+
+
+- 横向排版
+
+ 在一行不要放置 3 列以上的输入框；标签和输入框应该落在栅格上。
+
+- 纵向排版
+
+ 使用 `16px` 作为间距。
+
+
+## 字段型
+
+### 交互
+
+
+
+字段型一般会出现在主搜索框底部，适合搜索条件和值都比较少的场景中。
+
+
+## 案例（敬请期待）
diff --git a/docs/pattern/complex-table.md b/docs/pattern/complex-table.md
new file mode 100644
index 000000000000..2c4e103a7076
--- /dev/null
+++ b/docs/pattern/complex-table.md
@@ -0,0 +1,52 @@
+# 表格：复杂数据
+
+- category: 5
+- order: 5
+
+---
+
+表格也用于展示复杂和高度结构化数据。
+
+## 案例
+
+### 多列数据
+
+
+
+通过按钮，可实现更多列数据的加载以及左右切换。
+
+
+ +
+
+提供用户自定义列的功能，方便用户查看需要的列。
+
+
+ +
+
+固定表头列，通过横向滚动条来查看剩余内容。
+
+### 带图标的表格
+
+
+
+通过图标强化信息的传递，适用在表达数据变化趋势。
+
+### 带图表的表格
+
+
+
+通过图表来强化信息的传递，适用在表达数据变化趋势。
+
+### 二维表格
+
+
+
+横向和纵向各一个标题来展现数据。
+
+### 小表格
+
+
+
+适用在卡片、弹出框等空间较小的场景中。
diff --git a/docs/pattern/form.md b/docs/pattern/form.md
new file mode 100644
index 000000000000..ac865a1b5f39
--- /dev/null
+++ b/docs/pattern/form.md
@@ -0,0 +1,163 @@
+# 表单
+
+- category: 2
+- order: 2
+
+---
+
+作为获取用户输入的重要交互方式，表单也承担将问题和答案进行配对的角色。
+
+设计者进行表单设计时，应当注意这几点：
+
+1. 确保用户了解要提供什么信息，以及为什么要提供这些信息。
+
+ 为初级用户／偶尔访问的用户提供白话作为『标签』；为领域专家提供专业术语作为『标签』。当需要用户提供敏感信息时，通过『输入提示』来说明系统为什么要这么做，eg：需要获取身份证号码、手机号码时。
+
+2. 让用户能在上下文中获取信息，帮助他完成输入。
+
+ 使用『良好的默认值』、『结构化的格式』、『输入提示』、『输入提醒』等方式，避免让用户在空白中完成输入。
+
+3. 对错误敏感，并尽可能宽容。
+
+ 通过不同的『校验』规则和形式进行反馈，避免用户在点击提交后才刚刚开始『校验』，让用户提前纠正错误；依据『容错格式』，允许用户以多种格式和语法输入，eg：用户在电话号码输入框中多输入了一个空格，系统存储时可以主动删掉空格，但是不需要告诉用户这是一个错误。
+
+4. 不要提出不必要的问题。
+
+## 内容
+
+
+
+通常表单会有四个部分组成。
+
+1. 标签
+2. 输入框
+3. 校验反馈
+4. 动作
+
+> 注：`*` 表明该项为必填项。
+
+## 交互
+
+### 填空
+
+
+
+在一种描述性的上下文中出现输入项，可以帮助用户理解当前的状况，以及需要提供什么数据。
+
+### 组合输入框
+
+
+
+当两个输入框关联性很强时，可以前后拼接，减少页面空间。
+
+### 对齐方式
+
+
+
+在页面设计表单时，按钮组必须和输入框左对齐。
+
+### 禁用主按钮
+
+当输入框非常少时（一般少于 3 个），如果用户没有在必填项中输入内容，可禁用『提交』等主按钮；当输入框非常多时（超过 5 项以上），不建议禁用主按钮。
+
+
+ +
+
+
+
+当输入框非常少时，用户一输入就会有反馈，因而主按钮的禁用规则非常清晰，容易被用户理解。
+
+
+ +
+
+当输入框非常多时（尤其是输入项中交叉了必填项和非必填项），整个反馈链路冗长又复杂，禁用规则难以被识别，容易引起困惑。
+
+### 结构化的格式
+
+
+
+用户对输入的内容很熟悉，且系统不希望接受任何偏离期望的格式。
+
+### 输入提示 & 输入提醒
+
+
+
+
+输入提示：不希望在标签上放置太多文字进行解释，同时只有标签又会引起误解。
+
+输入提醒：提醒用户该控件的目的或所需格式，由于在用户输入后提醒就会消失，所以适用在用户对内容比较熟悉时。
+
+### 密码加强计
+
+
+
+提供关于密码强度和有效性的及时反馈，适用在注册页面时的密码输入框。
+
+### 校验
+
+
+
+
+
+
+通过不同的『校验』规则和形式进行反馈，避免用户在点击提交后才刚刚开始『校验』，让用户提前纠正错误。
+
+### 字数校验框
+
+
+
+用于统计当前输入长度，以及是否超过系统阈值。
+
+
+## 规格
+
+### 间距
+
+
+
+典型表单的间隔规范。
+
+### 输入框宽度
+
+
+
+
+当内容可预知，可以根据内容长短进行定义其落在多少个栅格上。
+
+
+ +### 对齐方式 + +无论左对齐、右对齐还是顶部对齐，都有其优缺点和应用场景，所以正确的解决方案取决于具体目标和制约因素，诸如：希望用户加快或者降低填写速度（有时设计者希望用户深思熟虑每个输入）、屏幕显示的限制、本地化考虑等多种因素。 + +
+ +
+
+右对齐（推荐）。
+
+- 优点：节约垂直空间。
+- 缺点：降低可读性；标签长度和输入框弹性小。
+- 场景：既要减少垂直空间，又要加快填写速度。
+
+
+ +
+
+顶部对齐。
+
+- 优点：有最快的浏览和处理速度；标签长度弹性大。
+- 缺点：非常占垂直空间。
+- 场景：希望用户快速填写表单，完成任务。
+
+
+ +
+
+左对齐。
+
+- 优点：文字开头按阅读视线对齐，方便阅读；节约垂直空间。
+- 缺点：填写速度慢；标签长度和输入框弹性小。
+- 场景：希望用户放慢速度，仔细思考表单中的每个输入框。
diff --git a/spec/pattern.md b/docs/pattern/index.md
similarity index 50%
rename from spec/pattern.md
rename to docs/pattern/index.md
index 81e69b7e1e74..4f064c76e954 100644
--- a/spec/pattern.md
+++ b/docs/pattern/index.md
@@ -1,9 +1,9 @@
-# 设计模式
+# 典型页面
-- category: 模式
+- category: 0
+- order: 0
- disabled: true
---
敬请期待。
-
diff --git a/docs/pattern/list.md b/docs/pattern/list.md
new file mode 100644
index 000000000000..2abd1a1d6bf3
--- /dev/null
+++ b/docs/pattern/list.md
@@ -0,0 +1,101 @@
+# 列表
+
+- category: 3
+- order: 3
+
+---
+
+列表是非常常见的界面元素，有多种使用场景：
+
+- 获取概览
+- 逐项浏览
+- 查找特定列表项
+- 排序与过滤
+- 重新安排、添加、删除或重新分类列表项
+
+## 交互
+
+### 显示详情信息
+
+
+
+气泡显示：用户鼠标点击／悬停某个链接或内容时，在悬浮层上显示该条列表项少量的详情信息。
+
+
+ +
+
+
+
+
+
+列表嵌入：用户可以不用打开新页面或者打开弹框，只要通过点击，就可以直接在上下文中查看该列表项的详情信息。
+
+
+ +
+
+弹出层显示：用户通过点击，在弹出框中查看该列表项的详情信息，但是当前列表项的上下文关系会被打断。
+
+
+ +
+
+双面板选择器：用户通过点击，在列表的一侧（一般为右侧）查看该列表项大量的详情信息。
+
+
+ +
+
+
+
+
+单窗口深入：用户通过点击，在当前页查看大量的详情信息。此模式打破了整个列表项的上下文关系，适用在详情信息之间完全无关，或者屏幕空间实在狭小（eg：移动应用），又或者列表和内容可能非常多的应用场景中。
+
+### 显示更多文本
+
+
+
+宽行：使某些列表项可以扩展为多行文本行来显示足够的文本内容。
+
+
+ +
+
+对等网格：以网格或者矩阵的方式排列内容元素，其中每个元素都有相仿的视觉重量。
+
+### 显示图片
+
+
+
+走马灯：以一维的形式来显示图片，可用户主动触发或者系统自动播放。
+
+
+ +
+
+缩略图网格：以二维的形式来展现图片/Icon，具有强烈的视觉效果，可以吸引用户注意。
+
+### 显示长列表
+
+
+
+分页器：以分段的形式加载列表，将是否需要加载其他项的选择权交给用户。
+
+
+ +
+
+无限加载：当用户加载到第一段内容的最下方，通过监听滚轮事件或者用户点击按钮，继续加载下一段内容。
+
+### 显示分类或者层级的列表
+
+
+
+
+
+
+
+
+ +## 案例（敬请期待） diff --git a/docs/pattern/navigation.md b/docs/pattern/navigation.md new file mode 100644 index 000000000000..4bf0ae676a94 --- /dev/null +++ b/docs/pattern/navigation.md @@ -0,0 +1,94 @@ +# 导航 + +- category: 1 +- order: 1 + +--- + +在广义上，任何告知用户他在哪里，他能去什么地方以及如何到达那里的方式，都可以称之为导航。而我们将中后台常见的导航方式进行提炼和封装，帮助设计者快速构建清晰和流畅的系统。当设计者使用导航或者自定义一些导航结构时，请注意： + +1. 尽可能提供标示、上下文线索以及网站地图，避免用户迷路； +2. 保持导航样式和行为一致或者减少导航数量，降低用户学习成本； +3. 尽可能减少页面间的跳转（eg：一个常见任务需要多个页面跳转时，请减少至一至两次），让用户移动距离保持简短。 + +## 常见导航 + +
+
+
+我们将常见的导航模式分为：侧栏导航和顶部导航，两者各有优缺点，设计者可以根据各自的业务需求进行选择。
+
+前端实现代码可以参考 [常用布局](/docs/spec/layout#layout-demo-top)。
+
+## 侧栏导航
+
+---
+
+
+
+导航的结构由以下几部分组成。
+
+1. 产品 Logo 和名称
+2. 业务类目
+3. 登陆工具
+4. 面包屑（可选）
+
+> 1. 尽可能不使用面包屑，尤其是当前页面的导航能清晰的告诉用户他在哪里时。
+> 2. 面包屑可以分为这几类：
+> - 路径型：是一个动态显示用户到达页面经过的途径。
+> - 位置型：位置型是固定的，显示了页面在网站结构中的位置。
+> - 属性型：属性型给出当前页面的分类信息。
+
+
+ +
+
+
+
+
+
+我们定义了不同类目层级所对应的导航样式。
+
+
+## 顶部导航
+
+---
+
+
+
+导航的结构由以下几部分组成。
+
+1. 产品 Logo 和名称
+2. 业务类目
+3. 登陆工具
+4. 面包屑（可选）
+
+
+ +
+
+
+
+
+
+不同类目层级。
diff --git a/docs/pattern/table.md b/docs/pattern/table.md
new file mode 100644
index 000000000000..970622670259
--- /dev/null
+++ b/docs/pattern/table.md
@@ -0,0 +1,157 @@
+# 表格
+
+- category: 4
+- order: 4
+
+---
+
+表格可被视为一种列表。它经常和其他界面元素一起协同，用于展示和操作结构化数据，并经常用于详情信息的入口。
+
+## 内容
+
+
+
+通常表格的组成元素以及相关元素会有，这几部分组成。
+
+1. 按钮组
+2. 搜索条件
+3. 排序
+4. 筛选
+5. 状态点
+6. 单行操作
+7. 分页器／无限加载（可选）
+
+### 筛选
+
+
+
+当该列选项有限，用户又希望只查看一个或者多个值时，可考虑使用。
+
+### 状态点
+
+
+
+一般用四种颜色来表明系统的不同状态。
+
+### 更多操作
+
+
+
+该项暂时不可用时，直接灰化该操作；用户没有该权限时，直接隐藏该操作。
+
+### 跳转至详情
+
+
+
+把 ID、名称等唯一性的表格项处理成文字链，点击后跳转至详情。
+
+- 优点：节省空间；
+- 缺点：可发现性较低；点击区域受到内容限制，可能出现不易点击的情况。
+
+
+ +
+
+在操作中增加一列『查看』，点击后进行跳转至详情。
+
+- 优点：可发现性高；点击范围固定，不受影响；
+- 缺点：比较占空间。
+
+
+ +结论：可根据业务系统中表格的实际情况，统一使用一种类型。 + +## 交互 + +### 显示长表格 + +参考『列表页面』中的 [显示长列表](/docs/pattern/list#%E6%98%BE%E7%A4%BA%E9%95%BF%E5%88%97%E8%A1%A8)。 + +### 全选数据 + +
+
+
+
+
+
+当使用了分页器，又想实现全选数据的功能，可以结合『Alert』来实现。
+
+### 跨页选数据
+
+
+
+
+
+
+
+
+
+
+
+当需要对表格／列表的数据进行跨分页器选择时，结合『Alert』来实现。
+
+### 固定按钮组
+
+
+
+
+
+用在表格行数很多时（一般多于 20 行），又想对表格数据进行频繁的操作时，尤其适用在无限加载的表格中。
+
+### 某一项内容过长
+
+
+
+某一项内容过长／不确定长度，既不希望用户在列表和详情之间来回跳转，又不希望不确定的数据撑爆表格时。
+
+### 模块编辑
+
+
+
+适用在易读性高于易编辑性时；适用在有一定数量的项需要编辑时。
+
+### 直接编辑
+
+
+
+适用在易编辑性高于易读性时。
+
+### 悬浮层编辑
+
+
+
+悬浮层会遮挡部分页面，适用在上下文对编辑任务不那么重要时。
+
+
+## 规格
+
+### 行高
+
+
+
+
+
+
+
+提供了多种规格的行高，适用在页面、弹出框等场景中。
+
+### 列宽
+
+
+
+
+
+一般是根据栅格来排版，通过设定每一列的宽度比列，来保证一定尺寸之上（eg：1366px）有好的浏览效果。需要注意：
+
+1. 表头不换行；
+2. 固定字节长度的列尽量不换行（eg：创建时间、操作等）。
+
+### 对齐方式
+
+
+
+数值右对齐（带小数则按小数点对齐），其余左对齐。
+
+
+## 案例（敬请期待）
diff --git a/docs/practice/bussiness.md b/docs/practice/bussiness.md
new file mode 100644
index 000000000000..26e58ecdc8d9
--- /dev/null
+++ b/docs/practice/bussiness.md
@@ -0,0 +1,9 @@
+# 业务组件
+
+- category: 1
+- order: 1
+- disabled: true
+
+---
+
+占位。
diff --git a/docs/practice/cases.md b/docs/practice/cases.md
new file mode 100644
index 000000000000..bdb1086f6de6
--- /dev/null
+++ b/docs/practice/cases.md
@@ -0,0 +1,115 @@
+# 实践案例
+
+- category: 0
+- order: 0
+
+---
+
+Ant Design 是面向中后台的 UI 设计语言。
+
+从 2015 年 4 月起，Ant Design 在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 40 个以上。定位于中后台业务的 Ant Design 兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从界面设计到前端开发的全链路生态，可以大大提升设计和开发的效率。
+
+## 最佳实践
+
+---
+
+### 金融云
+
+
+
+
+
+金融云是面向金融机构深度定制的行业云计算服务；助力金融机构向新金融转型升级，推动平台、数据和技术方面的能力全面对外开放。
+
+立即访问
+
+---
+
+### OceanBase Cloud Platform
+
+
+
+
+
+OceanBase 是一款真正意义上的云端分布式关系型数据库，而 OceanBase Cloud Platform（云平台）是以 OceanBase 数据库为基础的云服务，可以帮助用户快速创建、使用 OB 服务。
+
+立即访问
+
+---
+
+### 服务宝体验平台
+
+
+
+
+
+
+
+体验平台是收集用户与公司所有的接触点（包括来电咨询／微博等渠道）的数据，通过数据挖掘和体验同学运营的方式推送给公司内部的业务团队／产品经理，并推动体验问题解决，从而实现良性运转流。
+
+立即访问
+
+---
+
+### AntV
+
+
+
+
+
+AntV 将数据图形小组近几年在探索数据可视化过程中取得的成果进行总结和沉淀，并分享给所有需要数据可视理论的人。
+
+立即访问
+
+
+
+
diff --git a/docs/getting-started.md b/docs/react/getting-started.md
similarity index 95%
rename from docs/getting-started.md
rename to docs/react/getting-started.md
index 3284ffc4e176..cb91b7e4ef30 100644
--- a/docs/getting-started.md
+++ b/docs/react/getting-started.md
@@ -9,7 +9,7 @@ Ant Design React 致力于提供给程序员**愉悦**的开发体验。
## 第一个例子
-最简单的试用方式参照以下 JSFiddle 演示, 也推荐 Fork 本例来进行 `Bug Report`, 注意不要在实际项目中这样使用。
+最简单的试用方式参照以下 JSFiddle 演示，也推荐 Fork 本例来进行 `Bug Report`，注意不要在实际项目中这样使用。
- [antd JSFiddle](http://jsfiddle.net/0dso5y0x/)
@@ -107,6 +107,7 @@ Ant Design React 支持所有的现代浏览器和 IE8+。
margin-top: -42px;
position: relative;
z-index: 1;
+ width: 80%;
}
diff --git a/docs/install.md b/docs/react/install.md
similarity index 100%
rename from docs/install.md
rename to docs/react/install.md
diff --git a/docs/install_en.md b/docs/react/install_en.md
similarity index 100%
rename from docs/install_en.md
rename to docs/react/install_en.md
diff --git a/docs/introduce.md b/docs/react/introduce.md
similarity index 82%
rename from docs/introduce.md
rename to docs/react/introduce.md
index bd2d0c7e313d..8e7dcbfc3701 100644
--- a/docs/introduce.md
+++ b/docs/react/introduce.md
@@ -27,7 +27,7 @@
## 特性
-- Designed as Ant Design, 提炼和服务企业级中后台产品的交互语言和视觉风格。
+- Designed as Ant Design，提炼和服务企业级中后台产品的交互语言和视觉风格。
- [React Component](http://react-component.github.io/badgeboard/) 上精心封装的高质量 UI 库。
- 基于 npm + webpack + babel 的工作流，支持 ES2015。
@@ -71,9 +71,10 @@ import 'antd/lib/index.css'; // or 'antd/style/index.less'
## 谁在使用
- 蚂蚁金服
+- 口碑
> 如果你的公司和产品使用了 Ant Design，欢迎到 [这里](https://github.com/ant-design/ant-design/issues/477) 留言。
## 如何贡献
-我们欢迎任何形式的贡献，有任何建议或意见您可以进行 [Pull Request](https://github.com/ant-design/ant-design/pulls)，或者给我们[提问](https://github.com/ant-design/ant-design/issues)。
+在任何形式的参与前，请先阅读 [贡献者文档](https://github.com/ant-design/ant-design/blob/master/CONTRIBUTING.md)。有任何建议或意见您可以 [Pull Request](https://github.com/ant-design/ant-design/pulls)，给我们 [报告 Bug](http://t.cn/R4XEpoQ) 或 [提问](https://github.com/ant-design/ant-design/issues)。
diff --git a/docs/upgrade-notes.md b/docs/react/upgrade-notes.md
similarity index 100%
rename from docs/upgrade-notes.md
rename to docs/react/upgrade-notes.md
diff --git a/docs/resource/download.md b/docs/resource/download.md
new file mode 100644
index 000000000000..680ee6801271
--- /dev/null
+++ b/docs/resource/download.md
@@ -0,0 +1,108 @@
+# 资源下载
+
+- order: 0
+- category: 0
+
+---
+
+这里提供 Ant Design 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。
+
+
+ 
+
+ Axure Components
+ 一套强大的 Ant Design 的 Axure 部件库
+
+
+
+ 
+
+ Axure Box
+ 强大的 Ant Design 组件拼装方式
+
+
+
+ 
+
+ Ant UX
+ 一套页面逻辑原型库，帮你梳理页面逻辑
+
+
+
+ 
+
+ Web Font
+ 网络字体图标的本地文件包
+
+
+
+ 
+
+ Ant Cool
+ 一个机智的设计资源共享工具
+
+
+
+
diff --git a/docs/resource/github.md b/docs/resource/github.md
new file mode 100644
index 000000000000..de1fb5c62395
--- /dev/null
+++ b/docs/resource/github.md
@@ -0,0 +1,7 @@
+# GitHub
+
+- order: 3
+- category: 3
+- link: https://github.com/ant-design/ant-design
+
+---
diff --git a/docs/resource/reference.md b/docs/resource/reference.md
new file mode 100644
index 000000000000..5abcc5095f24
--- /dev/null
+++ b/docs/resource/reference.md
@@ -0,0 +1,126 @@
+# 文献素材
+
+- order: 1
+- category: 1
+
+---
+
+在进行模式、组件和语言的整理中，《About Face 4》、《Web 界面设计》、《界面设计模式》、《写给大家看的设计书》、《设计心理学》、《Web表单设计：点石成金的艺术》等书籍给了我们很多的启示，帮助我们节约了大量时间，并成功克服了很多困难。如果想了解更多设计相关的内容，建议你去阅读这些非常棒的书籍。
+
+
+ 
+
+ About Face 4
+ 作者: Alan.cooper
+ 出版社: 电子工业出版社
+
+
+
+ 
+
+ Web界面设计
+ 作者: Bill Scott / Theresa Neil
+ 出版社: 电子工业出版社
+
+
+
+ 
+
+ 界面设计模式
+ 作者: Tidwell,J.
+ 出版社: 电子工业出版社
+
+
+
+ 
+
+ 写给大家看的设计书
+ 作者: Robin Williams
+ 出版社: 人民邮电出版社
+
+
+
+ 
+
+ 设计心理学 1
+ 作者: 唐纳德•A•诺曼
+ 出版社: 中信出版社
+
+
+
+ 
+
+ 设计心理学 3
+ 作者: 唐纳德•A•诺曼
+ 出版社: 中信出版社
+
+
+
+ 
+
+ Web表单设计：点石成金的艺术
+ 作者: Luke Wroblewski
+ 出版社: 清华大学出版社
+
+
+
+
diff --git a/spec/colors.md b/docs/spec/colors.md
similarity index 100%
rename from spec/colors.md
rename to docs/spec/colors.md
diff --git a/spec/easing.md b/docs/spec/easing.md
similarity index 100%
rename from spec/easing.md
rename to docs/spec/easing.md
diff --git a/spec/font.md b/docs/spec/font.md
similarity index 100%
rename from spec/font.md
rename to docs/spec/font.md
diff --git a/spec/introduce.md b/docs/spec/introduce.md
similarity index 90%
rename from spec/introduce.md
rename to docs/spec/introduce.md
index e0338587bb2f..6122120c0c87 100644
--- a/spec/introduce.md
+++ b/docs/spec/introduce.md
@@ -5,9 +5,9 @@
---
-Ant Design 是一个 UI 设计语言，是一套提炼和应用于企业级后台产品的交互语言和视觉体系。
+Ant Design 是一个 UI 设计语言，是一套提炼和应用于企业级中后台产品的交互语言和视觉体系。
-
+
Ant Design 源自蚂蚁金服体验技术部的后台产品开发，我们的设计师和前端工程师经过大量的项目实践和总结，希望能抽象出一套企业级的交互视觉规范，统一后台项目的前端 UI 设计，屏蔽各种不必要的设计差异和前端实现成本，解放设计和前端开发资源。
@@ -16,6 +16,7 @@ Ant Design 源自蚂蚁金服体验技术部的后台产品开发，我们的设
## 谁在使用
- 蚂蚁金服
+- 口碑
> 如果你的公司和产品使用了 Ant Design，欢迎到 [这里](https://github.com/ant-design/ant-design/issues/477) 留言。
diff --git a/spec/layout/demo/aside.md b/docs/spec/layout/demo/aside.md
similarity index 98%
rename from spec/layout/demo/aside.md
rename to docs/spec/layout/demo/aside.md
index d044e4da962c..06764f0ad267 100644
--- a/spec/layout/demo/aside.md
+++ b/docs/spec/layout/demo/aside.md
@@ -61,7 +61,7 @@ ReactDOM.render(
-
点击或将文件拖拽到此区域上传
-支持单个或批量上传，严禁上传公司内部资料及其他违禁文件
-
+
+, mountNode);
````
diff --git a/components/upload/demo/multiple.md b/components/upload/demo/multiple.md
index 57bc033d29a9..a02a46460535 100644
--- a/components/upload/demo/multiple.md
+++ b/components/upload/demo/multiple.md
@@ -1,6 +1,7 @@
# 多文件选择
- order: 5
+- hidden: 5
按住 ctrl 可选择多个文件，`ie10+` 支持。
diff --git a/components/upload/demo/picture-style.md b/components/upload/demo/picture-style.md
index 308244379a82..0d2259dc24f9 100644
--- a/components/upload/demo/picture-style.md
+++ b/components/upload/demo/picture-style.md
@@ -4,7 +4,7 @@
上传文件为图片，可展示本地缩略图。
-`IE8/9` 不支持浏览器本地缩略图展示([ref](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL))，可以写 `thumbUrl` 属性来代替。
+`IE8/9` 不支持浏览器本地缩略图展示（[Ref](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL)），可以写 `thumbUrl` 属性来代替。
---
@@ -30,10 +30,28 @@ const props = {
};
ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
点击或将文件拖拽到此区域上传
+支持单个或批量上传，严禁上传公司内部资料及其他违禁文件
++
+
+
+常规型常和表格搭配使用，适合在搜索条件多以及搜索值个数不确定的场景中。
+
+『高级搜索』功能一般开放给中间用户／专家用户使用，一般通过点击『高级搜索』触发；如果非常高频使用，可以默认展开『高级搜索』。
+
++ +
+
+当已经输入了值的『高级搜索』被隐藏时，需要展示检索条件和值。
+
+### 排列规则
+
+
+
+搜索条件的排布顺序需要和表格中的标题顺序，尽可能保持一致；如果非常高频使用的搜索条件，可以放在最前面。
+
+### 规格
+
+
+
+
+
+- 横向排版
+
+ 在一行不要放置 3 列以上的输入框；标签和输入框应该落在栅格上。
+
+- 纵向排版
+
+ 使用 `16px` 作为间距。
+
+
+## 字段型
+
+### 交互
+
+
+
+字段型一般会出现在主搜索框底部，适合搜索条件和值都比较少的场景中。
+
+
+## 案例（敬请期待）
diff --git a/docs/pattern/complex-table.md b/docs/pattern/complex-table.md
new file mode 100644
index 000000000000..2c4e103a7076
--- /dev/null
+++ b/docs/pattern/complex-table.md
@@ -0,0 +1,52 @@
+# 表格：复杂数据
+
+- category: 5
+- order: 5
+
+---
+
+表格也用于展示复杂和高度结构化数据。
+
+## 案例
+
+### 多列数据
+
+
+
+通过按钮，可实现更多列数据的加载以及左右切换。
+
++ +
+
+提供用户自定义列的功能，方便用户查看需要的列。
+
++ +
+
+固定表头列，通过横向滚动条来查看剩余内容。
+
+### 带图标的表格
+
+
+
+通过图标强化信息的传递，适用在表达数据变化趋势。
+
+### 带图表的表格
+
+
+
+通过图表来强化信息的传递，适用在表达数据变化趋势。
+
+### 二维表格
+
+
+
+横向和纵向各一个标题来展现数据。
+
+### 小表格
+
+
+
+适用在卡片、弹出框等空间较小的场景中。
diff --git a/docs/pattern/form.md b/docs/pattern/form.md
new file mode 100644
index 000000000000..ac865a1b5f39
--- /dev/null
+++ b/docs/pattern/form.md
@@ -0,0 +1,163 @@
+# 表单
+
+- category: 2
+- order: 2
+
+---
+
+作为获取用户输入的重要交互方式，表单也承担将问题和答案进行配对的角色。
+
+设计者进行表单设计时，应当注意这几点：
+
+1. 确保用户了解要提供什么信息，以及为什么要提供这些信息。
+
+ 为初级用户／偶尔访问的用户提供白话作为『标签』；为领域专家提供专业术语作为『标签』。当需要用户提供敏感信息时，通过『输入提示』来说明系统为什么要这么做，eg：需要获取身份证号码、手机号码时。
+
+2. 让用户能在上下文中获取信息，帮助他完成输入。
+
+ 使用『良好的默认值』、『结构化的格式』、『输入提示』、『输入提醒』等方式，避免让用户在空白中完成输入。
+
+3. 对错误敏感，并尽可能宽容。
+
+ 通过不同的『校验』规则和形式进行反馈，避免用户在点击提交后才刚刚开始『校验』，让用户提前纠正错误；依据『容错格式』，允许用户以多种格式和语法输入，eg：用户在电话号码输入框中多输入了一个空格，系统存储时可以主动删掉空格，但是不需要告诉用户这是一个错误。
+
+4. 不要提出不必要的问题。
+
+## 内容
+
+
+
+通常表单会有四个部分组成。
+
+1. 标签
+2. 输入框
+3. 校验反馈
+4. 动作
+
+> 注：`*` 表明该项为必填项。
+
+## 交互
+
+### 填空
+
+
+
+在一种描述性的上下文中出现输入项，可以帮助用户理解当前的状况，以及需要提供什么数据。
+
+### 组合输入框
+
+
+
+当两个输入框关联性很强时，可以前后拼接，减少页面空间。
+
+### 对齐方式
+
+
+
+在页面设计表单时，按钮组必须和输入框左对齐。
+
+### 禁用主按钮
+
+当输入框非常少时（一般少于 3 个），如果用户没有在必填项中输入内容，可禁用『提交』等主按钮；当输入框非常多时（超过 5 项以上），不建议禁用主按钮。
+
++ +
+
+
+
+当输入框非常少时，用户一输入就会有反馈，因而主按钮的禁用规则非常清晰，容易被用户理解。
+
++ +
+
+当输入框非常多时（尤其是输入项中交叉了必填项和非必填项），整个反馈链路冗长又复杂，禁用规则难以被识别，容易引起困惑。
+
+### 结构化的格式
+
+
+
+用户对输入的内容很熟悉，且系统不希望接受任何偏离期望的格式。
+
+### 输入提示 & 输入提醒
+
+
+
+
+输入提示：不希望在标签上放置太多文字进行解释，同时只有标签又会引起误解。
+
+输入提醒：提醒用户该控件的目的或所需格式，由于在用户输入后提醒就会消失，所以适用在用户对内容比较熟悉时。
+
+### 密码加强计
+
+
+
+提供关于密码强度和有效性的及时反馈，适用在注册页面时的密码输入框。
+
+### 校验
+
+
+
+
+
+
+通过不同的『校验』规则和形式进行反馈，避免用户在点击提交后才刚刚开始『校验』，让用户提前纠正错误。
+
+### 字数校验框
+
+
+
+用于统计当前输入长度，以及是否超过系统阈值。
+
+
+## 规格
+
+### 间距
+
+
+
+典型表单的间隔规范。
+
+### 输入框宽度
+
+
+
+
+当内容可预知，可以根据内容长短进行定义其落在多少个栅格上。
+
++ +### 对齐方式 + +无论左对齐、右对齐还是顶部对齐，都有其优缺点和应用场景，所以正确的解决方案取决于具体目标和制约因素，诸如：希望用户加快或者降低填写速度（有时设计者希望用户深思熟虑每个输入）、屏幕显示的限制、本地化考虑等多种因素。 + +
+ +
+
+右对齐（推荐）。
+
+- 优点：节约垂直空间。
+- 缺点：降低可读性；标签长度和输入框弹性小。
+- 场景：既要减少垂直空间，又要加快填写速度。
+
++ +
+
+顶部对齐。
+
+- 优点：有最快的浏览和处理速度；标签长度弹性大。
+- 缺点：非常占垂直空间。
+- 场景：希望用户快速填写表单，完成任务。
+
++ +
+
+左对齐。
+
+- 优点：文字开头按阅读视线对齐，方便阅读；节约垂直空间。
+- 缺点：填写速度慢；标签长度和输入框弹性小。
+- 场景：希望用户放慢速度，仔细思考表单中的每个输入框。
diff --git a/spec/pattern.md b/docs/pattern/index.md
similarity index 50%
rename from spec/pattern.md
rename to docs/pattern/index.md
index 81e69b7e1e74..4f064c76e954 100644
--- a/spec/pattern.md
+++ b/docs/pattern/index.md
@@ -1,9 +1,9 @@
-# 设计模式
+# 典型页面
-- category: 模式
+- category: 0
+- order: 0
- disabled: true
---
敬请期待。
-
diff --git a/docs/pattern/list.md b/docs/pattern/list.md
new file mode 100644
index 000000000000..2abd1a1d6bf3
--- /dev/null
+++ b/docs/pattern/list.md
@@ -0,0 +1,101 @@
+# 列表
+
+- category: 3
+- order: 3
+
+---
+
+列表是非常常见的界面元素，有多种使用场景：
+
+- 获取概览
+- 逐项浏览
+- 查找特定列表项
+- 排序与过滤
+- 重新安排、添加、删除或重新分类列表项
+
+## 交互
+
+### 显示详情信息
+
+
+
+气泡显示：用户鼠标点击／悬停某个链接或内容时，在悬浮层上显示该条列表项少量的详情信息。
+
++ +
+
+
+
+
+
+列表嵌入：用户可以不用打开新页面或者打开弹框，只要通过点击，就可以直接在上下文中查看该列表项的详情信息。
+
++ +
+
+弹出层显示：用户通过点击，在弹出框中查看该列表项的详情信息，但是当前列表项的上下文关系会被打断。
+
++ +
+
+双面板选择器：用户通过点击，在列表的一侧（一般为右侧）查看该列表项大量的详情信息。
+
++ +
+
+
+
+
+单窗口深入：用户通过点击，在当前页查看大量的详情信息。此模式打破了整个列表项的上下文关系，适用在详情信息之间完全无关，或者屏幕空间实在狭小（eg：移动应用），又或者列表和内容可能非常多的应用场景中。
+
+### 显示更多文本
+
+
+
+宽行：使某些列表项可以扩展为多行文本行来显示足够的文本内容。
+
++ +
+
+对等网格：以网格或者矩阵的方式排列内容元素，其中每个元素都有相仿的视觉重量。
+
+### 显示图片
+
+
+
+走马灯：以一维的形式来显示图片，可用户主动触发或者系统自动播放。
+
++ +
+
+缩略图网格：以二维的形式来展现图片/Icon，具有强烈的视觉效果，可以吸引用户注意。
+
+### 显示长列表
+
+
+
+分页器：以分段的形式加载列表，将是否需要加载其他项的选择权交给用户。
+
++ +
+
+无限加载：当用户加载到第一段内容的最下方，通过监听滚轮事件或者用户点击按钮，继续加载下一段内容。
+
+### 显示分类或者层级的列表
+
+
+
+
+
+
+
++ +## 案例（敬请期待） diff --git a/docs/pattern/navigation.md b/docs/pattern/navigation.md new file mode 100644 index 000000000000..4bf0ae676a94 --- /dev/null +++ b/docs/pattern/navigation.md @@ -0,0 +1,94 @@ +# 导航 + +- category: 1 +- order: 1 + +--- + +在广义上，任何告知用户他在哪里，他能去什么地方以及如何到达那里的方式，都可以称之为导航。而我们将中后台常见的导航方式进行提炼和封装，帮助设计者快速构建清晰和流畅的系统。当设计者使用导航或者自定义一些导航结构时，请注意： + +1. 尽可能提供标示、上下文线索以及网站地图，避免用户迷路； +2. 保持导航样式和行为一致或者减少导航数量，降低用户学习成本； +3. 尽可能减少页面间的跳转（eg：一个常见任务需要多个页面跳转时，请减少至一至两次），让用户移动距离保持简短。 + +## 常见导航 + +
| + | 侧栏导航 | +顶部导航 | +
|---|---|---|
| 优点 | +导航的层级扩展性强；水平空间利用率高，可展示更多内容；导航可以固定，使得用户在操作和浏览时可以快速定位和切换当前位置，非常高效。 | +人的浏览习惯是自上而下的，便于浏览和点击；通常将内容放在固定尺寸（例如：1208px）内，整个页面排版稳定，不受用户终端显示器影响。 | +
| 缺点 | +内容区域一般放置在栅格上，所以排版受用户终端显示器影响大。 | +目前显示器多为宽屏，顶部导航对垂直空间占用率大，而对水平空间利用率低；由于中英文都是横向书写，顶部导航会限制导航类目的数量和长度。 | +
| 总结 | +一般适用在浏览性强、门户性质的网站，以及一些比较前台化的应用。 | +适用在操作性强、中后台管理性质的应用。 | +
+
+导航的结构由以下几部分组成。
+
+1. 产品 Logo 和名称
+2. 业务类目
+3. 登陆工具
+4. 面包屑（可选）
+
+> 1. 尽可能不使用面包屑，尤其是当前页面的导航能清晰的告诉用户他在哪里时。
+> 2. 面包屑可以分为这几类：
+> - 路径型：是一个动态显示用户到达页面经过的途径。
+> - 位置型：位置型是固定的，显示了页面在网站结构中的位置。
+> - 属性型：属性型给出当前页面的分类信息。
+
++ +
+
+
+
+
+
+我们定义了不同类目层级所对应的导航样式。
+
+
+## 顶部导航
+
+---
+
+
+
+导航的结构由以下几部分组成。
+
+1. 产品 Logo 和名称
+2. 业务类目
+3. 登陆工具
+4. 面包屑（可选）
+
++ +
+
+
+
+
+
+不同类目层级。
diff --git a/docs/pattern/table.md b/docs/pattern/table.md
new file mode 100644
index 000000000000..970622670259
--- /dev/null
+++ b/docs/pattern/table.md
@@ -0,0 +1,157 @@
+# 表格
+
+- category: 4
+- order: 4
+
+---
+
+表格可被视为一种列表。它经常和其他界面元素一起协同，用于展示和操作结构化数据，并经常用于详情信息的入口。
+
+## 内容
+
+
+
+通常表格的组成元素以及相关元素会有，这几部分组成。
+
+1. 按钮组
+2. 搜索条件
+3. 排序
+4. 筛选
+5. 状态点
+6. 单行操作
+7. 分页器／无限加载（可选）
+
+### 筛选
+
+
+
+当该列选项有限，用户又希望只查看一个或者多个值时，可考虑使用。
+
+### 状态点
+
+
+
+一般用四种颜色来表明系统的不同状态。
+
+### 更多操作
+
+
+
+该项暂时不可用时，直接灰化该操作；用户没有该权限时，直接隐藏该操作。
+
+### 跳转至详情
+
+
+
+把 ID、名称等唯一性的表格项处理成文字链，点击后跳转至详情。
+
+- 优点：节省空间；
+- 缺点：可发现性较低；点击区域受到内容限制，可能出现不易点击的情况。
+
++ +
+
+在操作中增加一列『查看』，点击后进行跳转至详情。
+
+- 优点：可发现性高；点击范围固定，不受影响；
+- 缺点：比较占空间。
+
++ +结论：可根据业务系统中表格的实际情况，统一使用一种类型。 + +## 交互 + +### 显示长表格 + +参考『列表页面』中的 [显示长列表](/docs/pattern/list#%E6%98%BE%E7%A4%BA%E9%95%BF%E5%88%97%E8%A1%A8)。 + +### 全选数据 + +
+
+
+
+
+
+当使用了分页器，又想实现全选数据的功能，可以结合『Alert』来实现。
+
+### 跨页选数据
+
+
+
+
+
+
+
+
+
+
+
+当需要对表格／列表的数据进行跨分页器选择时，结合『Alert』来实现。
+
+### 固定按钮组
+
+
+
+
+
+用在表格行数很多时（一般多于 20 行），又想对表格数据进行频繁的操作时，尤其适用在无限加载的表格中。
+
+### 某一项内容过长
+
+
+
+某一项内容过长／不确定长度，既不希望用户在列表和详情之间来回跳转，又不希望不确定的数据撑爆表格时。
+
+### 模块编辑
+
+
+
+适用在易读性高于易编辑性时；适用在有一定数量的项需要编辑时。
+
+### 直接编辑
+
+
+
+适用在易编辑性高于易读性时。
+
+### 悬浮层编辑
+
+
+
+悬浮层会遮挡部分页面，适用在上下文对编辑任务不那么重要时。
+
+
+## 规格
+
+### 行高
+
+
+
+
+
+
+
+提供了多种规格的行高，适用在页面、弹出框等场景中。
+
+### 列宽
+
+
+
+
+
+一般是根据栅格来排版，通过设定每一列的宽度比列，来保证一定尺寸之上（eg：1366px）有好的浏览效果。需要注意：
+
+1. 表头不换行；
+2. 固定字节长度的列尽量不换行（eg：创建时间、操作等）。
+
+### 对齐方式
+
+
+
+数值右对齐（带小数则按小数点对齐），其余左对齐。
+
+
+## 案例（敬请期待）
diff --git a/docs/practice/bussiness.md b/docs/practice/bussiness.md
new file mode 100644
index 000000000000..26e58ecdc8d9
--- /dev/null
+++ b/docs/practice/bussiness.md
@@ -0,0 +1,9 @@
+# 业务组件
+
+- category: 1
+- order: 1
+- disabled: true
+
+---
+
+占位。
diff --git a/docs/practice/cases.md b/docs/practice/cases.md
new file mode 100644
index 000000000000..bdb1086f6de6
--- /dev/null
+++ b/docs/practice/cases.md
@@ -0,0 +1,115 @@
+# 实践案例
+
+- category: 0
+- order: 0
+
+---
+
+Ant Design 是面向中后台的 UI 设计语言。
+
+从 2015 年 4 月起，Ant Design 在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 40 个以上。定位于中后台业务的 Ant Design 兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从界面设计到前端开发的全链路生态，可以大大提升设计和开发的效率。
+
+## 最佳实践
+
+---
+
+### 金融云
+
+
+
+
+
+金融云是面向金融机构深度定制的行业云计算服务；助力金融机构向新金融转型升级，推动平台、数据和技术方面的能力全面对外开放。
+
+立即访问
+
+---
+
+### OceanBase Cloud Platform
+
+
+
+
+
+OceanBase 是一款真正意义上的云端分布式关系型数据库，而 OceanBase Cloud Platform（云平台）是以 OceanBase 数据库为基础的云服务，可以帮助用户快速创建、使用 OB 服务。
+
+立即访问
+
+---
+
+### 服务宝体验平台
+
+
+
+
+
+
+
+体验平台是收集用户与公司所有的接触点（包括来电咨询／微博等渠道）的数据，通过数据挖掘和体验同学运营的方式推送给公司内部的业务团队／产品经理，并推动体验问题解决，从而实现良性运转流。
+
+立即访问
+
+---
+
+### AntV
+
+
+
+
+
+AntV 将数据图形小组近几年在探索数据可视化过程中取得的成果进行总结和沉淀，并分享给所有需要数据可视理论的人。
+
+立即访问
+
+
+
+
diff --git a/docs/getting-started.md b/docs/react/getting-started.md
similarity index 95%
rename from docs/getting-started.md
rename to docs/react/getting-started.md
index 3284ffc4e176..cb91b7e4ef30 100644
--- a/docs/getting-started.md
+++ b/docs/react/getting-started.md
@@ -9,7 +9,7 @@ Ant Design React 致力于提供给程序员**愉悦**的开发体验。
## 第一个例子
-最简单的试用方式参照以下 JSFiddle 演示, 也推荐 Fork 本例来进行 `Bug Report`, 注意不要在实际项目中这样使用。
+最简单的试用方式参照以下 JSFiddle 演示，也推荐 Fork 本例来进行 `Bug Report`，注意不要在实际项目中这样使用。
- [antd JSFiddle](http://jsfiddle.net/0dso5y0x/)
@@ -107,6 +107,7 @@ Ant Design React 支持所有的现代浏览器和 IE8+。
margin-top: -42px;
position: relative;
z-index: 1;
+ width: 80%;
}
diff --git a/docs/install.md b/docs/react/install.md
similarity index 100%
rename from docs/install.md
rename to docs/react/install.md
diff --git a/docs/install_en.md b/docs/react/install_en.md
similarity index 100%
rename from docs/install_en.md
rename to docs/react/install_en.md
diff --git a/docs/introduce.md b/docs/react/introduce.md
similarity index 82%
rename from docs/introduce.md
rename to docs/react/introduce.md
index bd2d0c7e313d..8e7dcbfc3701 100644
--- a/docs/introduce.md
+++ b/docs/react/introduce.md
@@ -27,7 +27,7 @@
## 特性
-- Designed as Ant Design, 提炼和服务企业级中后台产品的交互语言和视觉风格。
+- Designed as Ant Design，提炼和服务企业级中后台产品的交互语言和视觉风格。
- [React Component](http://react-component.github.io/badgeboard/) 上精心封装的高质量 UI 库。
- 基于 npm + webpack + babel 的工作流，支持 ES2015。
@@ -71,9 +71,10 @@ import 'antd/lib/index.css'; // or 'antd/style/index.less'
## 谁在使用
- 蚂蚁金服
+- 口碑
> 如果你的公司和产品使用了 Ant Design，欢迎到 [这里](https://github.com/ant-design/ant-design/issues/477) 留言。
## 如何贡献
-我们欢迎任何形式的贡献，有任何建议或意见您可以进行 [Pull Request](https://github.com/ant-design/ant-design/pulls)，或者给我们[提问](https://github.com/ant-design/ant-design/issues)。
+在任何形式的参与前，请先阅读 [贡献者文档](https://github.com/ant-design/ant-design/blob/master/CONTRIBUTING.md)。有任何建议或意见您可以 [Pull Request](https://github.com/ant-design/ant-design/pulls)，给我们 [报告 Bug](http://t.cn/R4XEpoQ) 或 [提问](https://github.com/ant-design/ant-design/issues)。
diff --git a/docs/upgrade-notes.md b/docs/react/upgrade-notes.md
similarity index 100%
rename from docs/upgrade-notes.md
rename to docs/react/upgrade-notes.md
diff --git a/docs/resource/download.md b/docs/resource/download.md
new file mode 100644
index 000000000000..680ee6801271
--- /dev/null
+++ b/docs/resource/download.md
@@ -0,0 +1,108 @@
+# 资源下载
+
+- order: 0
+- category: 0
+
+---
+
+这里提供 Ant Design 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。
+
+
+
+
+ Axure Components
+ 一套强大的 Ant Design 的 Axure 部件库
+
+
+
+
+
+ Axure Box
+ 强大的 Ant Design 组件拼装方式
+
+
+
+
+
+ Ant UX
+ 一套页面逻辑原型库，帮你梳理页面逻辑
+
+
+
+
+
+ Web Font
+ 网络字体图标的本地文件包
+
+
+
+
+
+ Ant Cool
+ 一个机智的设计资源共享工具
+
+
+
+
diff --git a/docs/resource/github.md b/docs/resource/github.md
new file mode 100644
index 000000000000..de1fb5c62395
--- /dev/null
+++ b/docs/resource/github.md
@@ -0,0 +1,7 @@
+# GitHub
+
+- order: 3
+- category: 3
+- link: https://github.com/ant-design/ant-design
+
+---
diff --git a/docs/resource/reference.md b/docs/resource/reference.md
new file mode 100644
index 000000000000..5abcc5095f24
--- /dev/null
+++ b/docs/resource/reference.md
@@ -0,0 +1,126 @@
+# 文献素材
+
+- order: 1
+- category: 1
+
+---
+
+在进行模式、组件和语言的整理中，《About Face 4》、《Web 界面设计》、《界面设计模式》、《写给大家看的设计书》、《设计心理学》、《Web表单设计：点石成金的艺术》等书籍给了我们很多的启示，帮助我们节约了大量时间，并成功克服了很多困难。如果想了解更多设计相关的内容，建议你去阅读这些非常棒的书籍。
+
+
+
+
+ About Face 4
+ 作者: Alan.cooper
+ 出版社: 电子工业出版社
+
+
+
+
+
+ Web界面设计
+ 作者: Bill Scott / Theresa Neil
+ 出版社: 电子工业出版社
+
+
+
+
+
+ 界面设计模式
+ 作者: Tidwell,J.
+ 出版社: 电子工业出版社
+
+
+
+
+
+ 写给大家看的设计书
+ 作者: Robin Williams
+ 出版社: 人民邮电出版社
+
+
+
+
+
+ 设计心理学 1
+ 作者: 唐纳德•A•诺曼
+ 出版社: 中信出版社
+
+
+
+
+
+ 设计心理学 3
+ 作者: 唐纳德•A•诺曼
+ 出版社: 中信出版社
+
+
+
+
+
+ Web表单设计：点石成金的艺术
+ 作者: Luke Wroblewski
+ 出版社: 清华大学出版社
+
+
+
+
diff --git a/spec/colors.md b/docs/spec/colors.md
similarity index 100%
rename from spec/colors.md
rename to docs/spec/colors.md
diff --git a/spec/easing.md b/docs/spec/easing.md
similarity index 100%
rename from spec/easing.md
rename to docs/spec/easing.md
diff --git a/spec/font.md b/docs/spec/font.md
similarity index 100%
rename from spec/font.md
rename to docs/spec/font.md
diff --git a/spec/introduce.md b/docs/spec/introduce.md
similarity index 90%
rename from spec/introduce.md
rename to docs/spec/introduce.md
index e0338587bb2f..6122120c0c87 100644
--- a/spec/introduce.md
+++ b/docs/spec/introduce.md
@@ -5,9 +5,9 @@
---
-Ant Design 是一个 UI 设计语言，是一套提炼和应用于企业级后台产品的交互语言和视觉体系。
+Ant Design 是一个 UI 设计语言，是一套提炼和应用于企业级中后台产品的交互语言和视觉体系。
-
+
Ant Design 源自蚂蚁金服体验技术部的后台产品开发，我们的设计师和前端工程师经过大量的项目实践和总结，希望能抽象出一套企业级的交互视觉规范，统一后台项目的前端 UI 设计，屏蔽各种不必要的设计差异和前端实现成本，解放设计和前端开发资源。
@@ -16,6 +16,7 @@ Ant Design 源自蚂蚁金服体验技术部的后台产品开发，我们的设
## 谁在使用
- 蚂蚁金服
+- 口碑
> 如果你的公司和产品使用了 Ant Design，欢迎到 [这里](https://github.com/ant-design/ant-design/issues/477) 留言。
diff --git a/spec/layout/demo/aside.md b/docs/spec/layout/demo/aside.md
similarity index 98%
rename from spec/layout/demo/aside.md
rename to docs/spec/layout/demo/aside.md
index d044e4da962c..06764f0ad267 100644
--- a/spec/layout/demo/aside.md
+++ b/docs/spec/layout/demo/aside.md
@@ -61,7 +61,7 @@ ReactDOM.render(
- Axure Widgets
-
- Sketch
-
- Web font
-