Merge branch 'master' into components-table

This commit is contained in:
afc163 2015-07-14 16:12:30 +08:00
commit 518bf992ba
4 changed files with 67 additions and 87 deletions

View File

@ -1,19 +0,0 @@
# 迷你的改变
- 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'));
````

View File

@ -3,11 +3,11 @@
let Pagination = require('rc-pagination'); let Pagination = require('rc-pagination');
let React = require('react'); let React = require('react');
let prefixCls = 'ant-patination'; let prefixCls = 'ant-pagination';
class AntPagination extends React.Component { class AntPagination extends React.Component {
render() { render() {
return <Pagination className={prefixCls + this.props.className} {...this.props} />; return <Pagination selectPrefixCls="ant-select" prefixCls={prefixCls} {...this.props} />;
} }
} }

View File

@ -25,4 +25,4 @@
| showSizeChanger | 是否可以改变 pageSize | Bool | false | | showSizeChanger | 是否可以改变 pageSize | Bool | false |
| showQuickJump | 是否可以快速跳转至某页 | Bool | false | | showQuickJump | 是否可以快速跳转至某页 | Bool | false |
| className | 当为「mini」时是小尺寸分页 | String | ant-pagination | | className | 当为「mini」时是小尺寸分页 | String | ant-pagination |
| simple | 当添加该属性时,显示简单分页 | Object | 无 | | simple | 当添加该属性时,显示简单分页 | Object | 无 |

View File

@ -1,4 +1,4 @@
@prefixClass: rc-pagination; @prefixClass: ant-pagination;
.@{prefixClass} { .@{prefixClass} {
@ -15,7 +15,7 @@
visibility: hidden; visibility: hidden;
} }
.@{prefixClass}-item { &-item {
cursor: pointer; cursor: pointer;
border-radius: 6px; border-radius: 6px;
min-width: 28px; min-width: 28px;
@ -41,7 +41,7 @@
} }
} }
&.active { &-active {
background-color: #2db7f5; background-color: #2db7f5;
border: none; border: none;
@ -51,7 +51,7 @@
} }
} }
.jump-prev, .jump-next { &-jump-prev, &-jump-next {
&:after { &:after {
content: "•••"; content: "•••";
display: block; display: block;
@ -69,7 +69,7 @@
} }
.jump-prev { &-jump-prev {
&:hover { &:hover {
&:after { &:after {
content: ""; content: "";
@ -77,7 +77,7 @@
} }
} }
.jump-next { &-jump-next {
&:hover { &:hover {
&:after { &:after {
content: ""; content: "";
@ -85,10 +85,10 @@
} }
} }
.prev, .jump-prev, .jump-next { &-prev, &-jump-prev, &-jump-next {
margin-right: 8px; margin-right: 8px;
} }
.prev, .next, .jump-prev, .jump-next { &-prev, &-next, &-jump-prev, &-jump-next {
cursor: pointer; cursor: pointer;
color: #666; color: #666;
font-size: 10px; font-size: 10px;
@ -101,7 +101,7 @@
text-align: center; text-align: center;
} }
.prev, .next { &-prev, &-next {
border: 1px solid #d9d9d9; border: 1px solid #d9d9d9;
a { a {
@ -116,87 +116,50 @@
a { a {
color: #2db7f5; color: #2db7f5;
} }
} }
&.disabled { }
cursor: not-allowed;
&-disabled {
&:hover {
border-color: #d9d9d9;
a { a {
color: #ccc; color: #ccc;
cursor: not-allowed;
} }
} }
cursor: not-allowed;
a {
color: #ccc;
}
} }
.options { &-options {
float: left; float: left;
margin-left: 15px; margin-left: 15px;
.size-changer { &-size-changer {
float: left; float: left;
width: 90px; width: 90px;
margin-right: 10px;
} }
.quick-jumper { &-quick-jumper {
float: left; float: left;
margin-left: 16px;
height: 28px; height: 28px;
line-height: 28px; line-height: 28px;
input { input {
.input;
margin: 0 8px; margin: 0 8px;
box-sizing: border-box;
background-color: #fff;
border-radius: 6px;
border: 1px solid #d9d9d9;
outline: none;
padding: 3px 12px;
width: 50px; 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 { &-simple &-prev, &-simple &-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; border: none;
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
@ -204,11 +167,11 @@
font-size: 18px; font-size: 18px;
} }
.simple-pager { &-simple &-simple-pager {
float: left; float: left;
margin-right: 8px; margin-right: 8px;
.slash { &-slash {
margin: 0 10px; margin: 0 10px;
} }
@ -222,6 +185,7 @@
padding: 5px 8px; padding: 5px 8px;
width: 30px; width: 30px;
min-height: 20px; min-height: 20px;
text-align: center;
&:hover { &:hover {
@ -232,3 +196,38 @@
} }
} }
.@{prefixClass} {
&.mini &-item {
border: none;
margin: 0;
min-width: 20px;
height: 20px;
line-height: 20px;
}
&.mini &-prev,
&.mini &-next {
margin: 0;
min-width: 20px;
height: 20px;
line-height: 20px;
border: none;
}
&.mini &-jump-prev, &.mini &-jump-next {
height: 20px;
line-height: 20px;
}
&.mini &-options {
&-quick-jumper {
height: 20px;
line-height: 20px;
input {
.input-sm;
}
}
}
}