Merge branch 'master' into components-table

components/pagenation/index.md

-# Pagenation
-
-- category: Components
-- chinese: 分页
-
----
-
-采用分页的形式分隔长列表，每次只加载一个页面。
-
-## 何时使用
-
-- 当加载/渲染所有数据将花费很多时间时；
-- 可切换页码浏览数据。

components/pagination/demo/basic.md

+# 基本
+
+- order: 0
+
+基础分页
+
+---
+
+````jsx
+var Pagination = antd.Pagination;
+
+function onChange(page) {
+  console.log(page);
+}
+
+React.render(
+  <Pagination onChange={onChange} total={50} />, 
+ document.getElementById('components-pagination-demo-basic'));
+````

components/pagination/demo/changer.md

+# 改变
+
+- order: 2
+
+改变每页显示条目数
+
+---
+
+````jsx
+var Pagination = antd.Pagination;
+
+function onChange(page) {
+  console.log(page);
+}
+
+React.render(
+  <Pagination showSizeChanger={true} onChange={onChange} total={500} />, 
+ document.getElementById('components-pagination-demo-changer'));
+````

components/pagination/demo/jump.md

+# 跳转
+
+- order: 3
+
+快速跳转到某一页
+
+---
+
+````jsx
+var Pagination = antd.Pagination;
+
+function onChange(page) {
+  console.log(page);
+}
+
+React.render(
+  <Pagination showQuickJumper={true} onChange={onChange} total={500} />, 
+ document.getElementById('components-pagination-demo-jump'));
+````

components/pagination/demo/mini-more.md

+# 迷你的改变
+
+- order: 5
+
+改变每页显示条目数
+
+---
+
+````jsx
+var Pagination = antd.Pagination;
+
+function onChange(page) {
+  console.log(page);
+}
+
+React.render(
+  <Pagination className="mini" showQuickJumper={true} showSizeChanger={true} onChange={onChange} total={500} />, 
+ document.getElementById('components-pagination-demo-mini-more'));
+````

components/pagination/demo/mini.md

+# 迷你
+
+- order: 4
+
+迷你版本
+
+---
+
+````jsx
+var Pagination = antd.Pagination;
+
+function onChange(page) {
+  console.log(page);
+}
+
+React.render(
+  <Pagination className="mini" onChange={onChange} total={50} />, 
+ document.getElementById('components-pagination-demo-mini'));
+````

components/pagination/demo/more.md

+# 更多
+
+- order: 1
+
+更多分页
+
+---
+
+````jsx
+var Pagination = antd.Pagination;
+
+function onChange(page) {
+  console.log(page);
+}
+
+React.render(
+  <Pagination onChange={onChange} total={500} />, 
+ document.getElementById('components-pagination-demo-more'));
+````

components/pagination/demo/simple.md

+# 简洁
+
+- order: 6
+
+简单地翻页
+
+---
+
+````jsx
+var Pagination = antd.Pagination;
+
+function onChange(page) {
+  console.log(page);
+}
+
+React.render(
+  <Pagination simple onChange={onChange} total={50} />, 
+ document.getElementById('components-pagination-demo-simple'));
+````

components/pagination/index.jsx

+'use strict';
+
+let Pagination = require('rc-pagination');
+let React = require('react');
+
+let prefixCls = 'ant-patination';
+
+class AntPagination extends React.Component {
+  render() {
+    return <Pagination className={prefixCls + this.props.className} {...this.props} />;
+  }
+}
+
+module.exports = AntPagination;

components/pagination/index.md

+# Pagination
+
+- category: Components
+- chinese: 分页
+
+---
+
+采用分页的形式分隔长列表，每次只加载一个页面。
+
+## 何时使用
+
+- 当加载/渲染所有数据将花费很多时间时；
+- 可切换页码浏览数据。
+
+## API
+
+### Pagination
+
+| 参数            | 说明                           | 类型     | 默认值         |
+|-----------------|--------------------------------|----------|----------------|
+| current         | 当前页数                       | Number   | 1              |
+| total           | 数据总数                       | Number   | 0              |
+| pageSize        | 每页条数                       | Number   | 10             |
+| onChange        | 页码改变的回调                 | Function | noop           |
+| showSizeChanger | 是否可以改变 pageSize          | Bool     | false          |
+| showQuickJump   | 是否可以快速跳转至某页         | Bool     | false          |
+| className       | 当为「mini」时，是小尺寸分页   | String   | ant-pagination |
+| simple          | 当添加该属性时，显示未简单分页 | Object   | 无             |

index.js

@@ -12,6 +12,7 @@ var antd = {
   Select: require('./components/select'),
   Breadcrumb: require('./components/breadcrumb'),
   Popconfirm: require('./components/popconfirm'),
+  Pagination: require('./components/pagination'),
   confirm: require('./components/modal/confirm'),
   Steps: require('./components/steps'),
   InputNumber: require('./components/input-number'),

package.json

@@ -22,6 +22,8 @@
     "rc-dropdown": "~1.1.1",
     "rc-input-number": "~2.0.1",
     "rc-menu": "~3.4.0",
+    "rc-notification": "~1.0.1",
+    "rc-pagination": "^1.0.0",
     "rc-progress": "~1.0.0",
     "rc-select": "~4.2.1",
     "rc-slider": "~1.2.4",
@@ -29,8 +31,7 @@
     "rc-table": "~3.0.1",
     "rc-switch": "~1.2.0",
     "rc-tabs": "~5.2.0",
-    "rc-tooltip": "~2.4.0",
-    "rc-notification": "~1.0.1"
+    "rc-tooltip": "~2.4.0"
   },
   "devDependencies": {
     "css-animation": "~1.0.3",

style/components/index.less

@@ -10,6 +10,7 @@
 @import "table";
 @import "tooltip";
 @import "popover";
+@import "pagination";
 @import "form";
 @import "loading";
 @import "progress";

style/components/pagination.less

+@prefixClass: rc-pagination;
+
+
+.@{prefixClass} {
+  user-select: none;
+  font-size: 12px;
+  font-family: 'Arial';
+
+  &:after {
+    content: " ";
+    display: block;
+    height: 0;
+    clear: both;
+    overflow: hidden;
+    visibility: hidden;
+  }
+
+  .@{prefixClass}-item {
+    cursor: pointer;
+    border-radius: 6px;
+    min-width: 28px;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+    list-style: none;
+    float: left;
+    border: 1px solid #d9d9d9;
+    background-color: #fff;
+    margin-right: 8px;
+
+    a {
+      text-decoration: none;
+      color: #666;
+    }
+
+
+    &:hover {
+      border-color: #2db7f5;
+      a {
+        color: #2db7f5;
+      }
+    }
+
+    &.active {
+      background-color: #2db7f5;
+      border: none;
+
+      a {
+        color: #fff;
+      }
+    }
+  }
+
+  .jump-prev, .jump-next {
+    &:after {
+      content: "•••";
+      display: block;
+      letter-spacing: 2px;
+      color: #ccc;
+      font-size: 12px;
+      margin-top: 1px;
+    }
+
+    &:hover {
+      &:after {
+        color: #2db7f5;
+      }
+    }
+
+  }
+
+  .jump-prev {
+    &:hover {
+      &:after {
+        content: "‹‹";
+      }
+    }
+  }
+
+  .jump-next {
+    &:hover {
+      &:after {
+        content: "››";
+      }
+    }
+  }
+
+  .prev, .jump-prev, .jump-next {
+    margin-right: 8px;
+  }
+  .prev, .next, .jump-prev, .jump-next {
+    cursor: pointer;
+    color: #666;
+    font-size: 10px;
+    border-radius: 6px;
+    list-style: none;
+    min-width: 28px;
+    height: 28px;
+    line-height: 28px;
+    float: left;
+    text-align: center;
+  }
+
+  .prev, .next {
+    border: 1px solid #d9d9d9;
+
+    a {
+      font-size: 16px;
+      line-height: 1;
+      color: #666;
+    }
+
+    &:hover {
+      border-color: #2db7f5;
+
+      a {
+        color: #2db7f5;
+      }
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+      a {
+        color: #ccc;
+      }
+    }
+  }
+
+  .options {
+    float: left;
+    margin-left: 15px;
+    .size-changer {
+      float: left;
+      width: 90px;
+    }
+
+    .quick-jumper {
+      float: left;
+      margin-left: 16px;
+      height: 28px;
+      line-height: 28px;
+
+      input {
+        margin: 0 8px;
+        box-sizing: border-box;
+        background-color: #fff;
+        border-radius: 6px;
+        border: 1px solid #d9d9d9;
+        outline: none;
+        padding: 3px 12px;
+        width: 50px;
+        height: 28px;
+
+        &:hover {
+          border-color: #2db7f5;
+        }
+      }
+    }
+  }
+}
+
+.@{prefixClass}.mini {
+
+  .@{prefixClass}-item {
+    border: none;
+    margin: 0;
+    min-width: 20px;
+    height: 20px;
+    line-height: 20px;
+  }
+
+  .prev, .next {
+    margin: 0;
+    min-width: 20px;
+    height: 20px;
+    line-height: 20px;
+    border: none;
+  }
+
+  .jump-prev, .jump-next {
+    height: 20px;
+    line-height: 20px;
+  }
+
+  .quick-jumper {
+    height: 20px;
+    line-height: 20px;
+
+    input {
+      padding: 3px 7px;
+      width: 40px;
+      height: 20px;
+      line-height: 20px;
+    }
+  }
+}
+
+.@{prefixClass}.simple {
+  .prev, .next {
+    border: none;
+    height: 24px;
+    line-height: 24px;
+    margin: 0;
+    font-size: 18px;
+  }
+
+  .simple-pager {
+    float: left;
+    margin-right: 8px;
+
+    .slash {
+      margin: 0 10px;
+    }
+
+    input {
+      margin: 0 8px;
+      box-sizing: border-box;
+      background-color: #fff;
+      border-radius: 6px;
+      border: 1px solid #d9d9d9;
+      outline: none;
+      padding: 5px 8px;
+      width: 30px;
+      min-height: 20px;
+
+
+      &:hover {
+        border-color: #2db7f5;
+      }
+    }
+
+  }
+}
+