From f93f9ee93191bcdfbda80da5b1af852d3f978a46 Mon Sep 17 00:00:00 2001 From: Yuwei Ba Date: Tue, 14 Jul 2015 12:09:29 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=B8=80=E4=BA=9B=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/pagination/demo/mini-more.md | 19 ---- components/pagination/index.jsx | 4 +- components/pagination/index.md | 2 +- style/components/pagination.less | 129 ++++++++++++------------ 4 files changed, 67 insertions(+), 87 deletions(-) delete mode 100644 components/pagination/demo/mini-more.md diff --git a/components/pagination/demo/mini-more.md b/components/pagination/demo/mini-more.md deleted file mode 100644 index e193f0eb9a..0000000000 --- a/components/pagination/demo/mini-more.md +++ /dev/null @@ -1,19 +0,0 @@ -# 迷你的改变 - -- order: 5 - -改变每页显示条目数 - ---- - -````jsx -var Pagination = antd.Pagination; - -function onChange(page) { - console.log(page); -} - -React.render( - , - document.getElementById('components-pagination-demo-mini-more')); -```` diff --git a/components/pagination/index.jsx b/components/pagination/index.jsx index 66b24f5453..f76365c930 100644 --- a/components/pagination/index.jsx +++ b/components/pagination/index.jsx @@ -3,11 +3,11 @@ let Pagination = require('rc-pagination'); let React = require('react'); -let prefixCls = 'ant-patination'; +let prefixCls = 'ant-pagination'; class AntPagination extends React.Component { render() { - return ; + return ; } } diff --git a/components/pagination/index.md b/components/pagination/index.md index a328e2af94..04ee0230aa 100644 --- a/components/pagination/index.md +++ b/components/pagination/index.md @@ -25,4 +25,4 @@ | showSizeChanger | 是否可以改变 pageSize | Bool | false | | showQuickJump | 是否可以快速跳转至某页 | Bool | false | | className | 当为「mini」时，是小尺寸分页 | String | ant-pagination | -| simple | 当添加该属性时，显示未简单分页 | Object | 无 | +| simple | 当添加该属性时，显示为简单分页 | Object | 无 | diff --git a/style/components/pagination.less b/style/components/pagination.less index 95f91f11c4..6b695876d7 100644 --- a/style/components/pagination.less +++ b/style/components/pagination.less @@ -1,4 +1,4 @@ -@prefixClass: rc-pagination; +@prefixClass: ant-pagination; .@{prefixClass} { @@ -15,7 +15,7 @@ visibility: hidden; } - .@{prefixClass}-item { + &-item { cursor: pointer; border-radius: 6px; min-width: 28px; @@ -41,7 +41,7 @@ } } - &.active { + &-active { background-color: #2db7f5; border: none; @@ -51,7 +51,7 @@ } } - .jump-prev, .jump-next { + &-jump-prev, &-jump-next { &:after { content: "•••"; display: block; @@ -69,7 +69,7 @@ } - .jump-prev { + &-jump-prev { &:hover { &:after { content: "‹‹"; @@ -77,7 +77,7 @@ } } - .jump-next { + &-jump-next { &:hover { &:after { content: "››"; @@ -85,10 +85,10 @@ } } - .prev, .jump-prev, .jump-next { + &-prev, &-jump-prev, &-jump-next { margin-right: 8px; } - .prev, .next, .jump-prev, .jump-next { + &-prev, &-next, &-jump-prev, &-jump-next { cursor: pointer; color: #666; font-size: 10px; @@ -101,7 +101,7 @@ text-align: center; } - .prev, .next { + &-prev, &-next { border: 1px solid #d9d9d9; a { @@ -116,87 +116,50 @@ a { color: #2db7f5; } + } - &.disabled { - cursor: not-allowed; + } + + &-disabled { + &:hover { + border-color: #d9d9d9; a { color: #ccc; + cursor: not-allowed; } } + cursor: not-allowed; + a { + color: #ccc; + } } - .options { + &-options { float: left; margin-left: 15px; - .size-changer { + &-size-changer { float: left; width: 90px; + margin-right: 10px; } - .quick-jumper { + &-quick-jumper { float: left; - margin-left: 16px; height: 28px; line-height: 28px; input { + .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 { + &-simple &-prev, &-simple &-next { border: none; height: 24px; line-height: 24px; @@ -204,11 +167,11 @@ font-size: 18px; } - .simple-pager { + &-simple &-simple-pager { float: left; margin-right: 8px; - .slash { + &-slash { margin: 0 10px; } @@ -222,6 +185,7 @@ padding: 5px 8px; width: 30px; min-height: 20px; + text-align: center; &: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; + } + } + } +}