mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-04 13:08:41 +08:00
Merge branch 'master' into components-table
This commit is contained in:
commit
518bf992ba
@ -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'));
|
|
||||||
````
|
|
@ -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} />;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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 | 无 |
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user