From 27c6e033227c7c00d84dc655a142862630055930 Mon Sep 17 00:00:00 2001 From: Yuwei Ba Date: Mon, 13 Jul 2015 01:04:05 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=88=86=E9=A1=B5=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/pagenation/index.jsx | 0 components/pagination/demo/basic.md | 19 + components/pagination/demo/changer.md | 19 + components/pagination/demo/jump.md | 19 + components/pagination/demo/more.md | 19 + components/pagination/index.jsx | 14 + .../{pagenation => pagination}/index.md | 0 index.js | 1 + package.json | 5 +- style/components/index.less | 1 + style/components/pagination.less | 499 ++++++++++++++++++ 11 files changed, 594 insertions(+), 2 deletions(-) delete mode 100644 components/pagenation/index.jsx create mode 100644 components/pagination/demo/basic.md create mode 100644 components/pagination/demo/changer.md create mode 100644 components/pagination/demo/jump.md create mode 100644 components/pagination/demo/more.md create mode 100644 components/pagination/index.jsx rename components/{pagenation => pagination}/index.md (100%) create mode 100644 style/components/pagination.less diff --git a/components/pagenation/index.jsx b/components/pagenation/index.jsx deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/components/pagination/demo/basic.md b/components/pagination/demo/basic.md new file mode 100644 index 0000000000..558b000761 --- /dev/null +++ b/components/pagination/demo/basic.md @@ -0,0 +1,19 @@ +# 基本 + +- order: 0 + +基础分页 + +--- + +````jsx +var Pagination = antd.Pagination; + +function onChange(page) { + console.log(page); +} + +React.render( + , + document.getElementById('components-pagination-demo-basic')); +```` diff --git a/components/pagination/demo/changer.md b/components/pagination/demo/changer.md new file mode 100644 index 0000000000..5ec6972256 --- /dev/null +++ b/components/pagination/demo/changer.md @@ -0,0 +1,19 @@ +# 改变 + +- order: 2 + +改变每页显示条目数 + +--- + +````jsx +var Pagination = antd.Pagination; + +function onChange(page) { + console.log(page); +} + +React.render( + , + document.getElementById('components-pagination-demo-changer')); +```` diff --git a/components/pagination/demo/jump.md b/components/pagination/demo/jump.md new file mode 100644 index 0000000000..13d22b03f8 --- /dev/null +++ b/components/pagination/demo/jump.md @@ -0,0 +1,19 @@ +# 跳转 + +- order: 3 + +快速跳转到某一页 + +--- + +````jsx +var Pagination = antd.Pagination; + +function onChange(page) { + console.log(page); +} + +React.render( + , + document.getElementById('components-pagination-demo-jump')); +```` diff --git a/components/pagination/demo/more.md b/components/pagination/demo/more.md new file mode 100644 index 0000000000..14c8ce7ec7 --- /dev/null +++ b/components/pagination/demo/more.md @@ -0,0 +1,19 @@ +# 更多 + +- order: 1 + +更多分页 + +--- + +````jsx +var Pagination = antd.Pagination; + +function onChange(page) { + console.log(page); +} + +React.render( + , + document.getElementById('components-pagination-demo-more')); +```` diff --git a/components/pagination/index.jsx b/components/pagination/index.jsx new file mode 100644 index 0000000000..e842a1c3a5 --- /dev/null +++ b/components/pagination/index.jsx @@ -0,0 +1,14 @@ +'use strict'; + +let Pagination = require('rc-pagination'); +let React = require('react'); + +let prefixCls = 'ant-patination'; + +class AntPagination extends React.Component { + render() { + return ; + } +} + +module.exports = AntPagination; diff --git a/components/pagenation/index.md b/components/pagination/index.md similarity index 100% rename from components/pagenation/index.md rename to components/pagination/index.md diff --git a/index.js b/index.js index 0ba737cd24..f86ce0c1f7 100644 --- a/index.js +++ b/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'), diff --git a/package.json b/package.json index 5b7feece11..a4099692cd 100644 --- a/package.json +++ b/package.json @@ -22,13 +22,14 @@ "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-steps": "~1.1.3", "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", diff --git a/style/components/index.less b/style/components/index.less index c4782f3612..213540d64e 100644 --- a/style/components/index.less +++ b/style/components/index.less @@ -9,6 +9,7 @@ @import "tabs"; @import "tooltip"; @import "popover"; +@import "pagination"; @import "form"; @import "loading"; @import "progress"; diff --git a/style/components/pagination.less b/style/components/pagination.less new file mode 100644 index 0000000000..0e4854718e --- /dev/null +++ b/style/components/pagination.less @@ -0,0 +1,499 @@ +@prefixClass: rc-pagination; + + +.@{prefixClass} { + 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 { + color: #666; + } + + &.disabled { + cursor: not-allowed; + a { + color: #ccc; + } + } + } + + .options { + float: left; + margin-left: 15px; + .size-changer { + float: left; + width: 70px; + } + + .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; + } + } + } + } +} + +.rc-select { + box-sizing: border-box; + display: inline-block; + margin: 0; + position: relative; + vertical-align: middle; + color: #666; +} +.rc-select ul, +.rc-select li { + margin: 0; + padding: 0; + list-style: none; +} +.rc-select > ul > li > a { + padding: 0; + background-color: #fff; +} +.rc-select-arrow { + height: 26px; + position: absolute; + top: 1px; + right: 1px; + width: 20px; +} +.rc-select-arrow b { + border-color: #999999 transparent transparent transparent; + border-style: solid; + border-width: 5px 4px 0 4px; + height: 0; + width: 0; + margin-left: -4px; + margin-top: -2px; + position: absolute; + top: 50%; + left: 50%; +} +.rc-select-selection { + outline: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-user-select: none; + box-sizing: border-box; + display: block; + background-color: #fff; + border-radius: 6px; + border: 1px solid #d9d9d9; +} +.rc-select-selection:hover { + border-color: #23c0fa; + box-shadow: 0 0 2px rgba(45, 183, 245, 0.8); +} +.rc-select-selection:active { + border-color: #2db7f5; +} +.rc-select-disabled { + color: #ccc; + cursor: not-allowed; + pointer-events: none; +} +.rc-select-disabled .rc-select-selection:hover, +.rc-select-disabled .rc-select-selection:active { + border-color: #d9d9d9; +} +.rc-select-selection--single { + height: 28px; + cursor: pointer; +} +.rc-select-selection--single .rc-select-selection__rendered { + display: block; + overflow: hidden; + text-overflow: ellipsis; + padding-left: 10px; + padding-right: 20px; + line-height: 28px; +} +.rc-select-selection--single .rc-select-selection__clear { + cursor: pointer; + float: right; + font-weight: bold; +} +.rc-select-disabled .rc-select-selection__choice__remove { + color: #ccc; + cursor: default; +} +.rc-select-disabled .rc-select-selection__choice__remove:hover { + color: #ccc; +} +.rc-select-search--inline { + float: left; + width: 100%; +} +.rc-select-search--inline .rc-select-search__field { + border: none; + font-size: 100%; + background: transparent; + outline: 0; + width: 100%; +} +.rc-select-search--inline > i { + float: right; +} +.rc-select-selection--multiple { + min-height: 28px; + cursor: text; +} +.rc-select-selection--multiple .rc-select-search--inline { + width: auto; +} +.rc-select-selection--multiple .rc-select-search--inline .rc-select-search__field { + width: 0.75em; +} +.rc-select-selection--multiple .rc-select-selection__rendered { + overflow: hidden; + text-overflow: ellipsis; + padding-left: 8px; + padding-bottom: 2px; +} +.rc-select-selection--multiple .rc-select-selection__clear { + cursor: pointer; + float: right; + font-weight: bold; + margin-top: 5px; + margin-right: 10px; +} +.rc-select-selection--multiple > ul > li { + margin-top: 4px; + height: 20px; + line-height: 20px; +} +.rc-select-selection--multiple .rc-select-selection__choice { + background-color: #f3f3f3; + border-radius: 4px; + cursor: default; + float: left; + padding: 0 8px; + margin-right: 4px; +} +.rc-select-selection--multiple .rc-select-selection__choice__remove { + color: #919191; + cursor: pointer; + display: inline-block; + font-weight: bold; + padding: 0 0 0 8px; +} +.rc-select-selection--multiple .rc-select-selection__choice__remove:before { + content: '×'; +} +.rc-select-selection--multiple .rc-select-selection__choice__remove:hover { + color: #333; +} +.rc-select-dropdown { + display: none; + background-color: white; + border: 1px solid #d9d9d9; + box-shadow: 0 0px 4px #d9d9d9; + border-radius: 4px; + box-sizing: border-box; + width: 100%; + z-index: 100; + position: absolute; + top: 100%; + margin-top: 4px; + outline: none; +} +.rc-select-dropdown .rc-select-menu-item[aria-selected=true] { + background-color: #ddd; +} +.rc-select-dropdown-slide-up-enter { + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-transform-origin: 0 0; + -ms-transform-origin: 0 0; + transform-origin: 0 0; + display: block !important; + opacity: 0; + -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); + animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); + -webkit-animation-play-state: paused; + animation-play-state: paused; +} +.rc-select-dropdown-slide-up-leave { + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-transform-origin: 0 0; + -ms-transform-origin: 0 0; + transform-origin: 0 0; + display: block !important; + opacity: 1; + -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); + animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); + -webkit-animation-play-state: paused; + animation-play-state: paused; +} +.rc-select-dropdown-slide-up-enter.rc-select-dropdown-slide-up-enter-active { + -webkit-animation-name: rcDropdownSlideUpIn; + animation-name: rcDropdownSlideUpIn; + -webkit-animation-play-state: running; + animation-play-state: running; +} +.rc-select-dropdown-slide-up-leave.rc-select-dropdown-slide-up-leave-active { + -webkit-animation-name: rcDropdownSlideUpOut; + animation-name: rcDropdownSlideUpOut; + -webkit-animation-play-state: running; + animation-play-state: running; +} +@-webkit-keyframes rcDropdownSlideUpIn { + 0% { + opacity: 0; + -webkit-transform-origin: 0% 0%; + transform-origin: 0% 0%; + -webkit-transform: scaleY(0); + transform: scaleY(0); + } + 100% { + opacity: 1; + -webkit-transform-origin: 0% 0%; + transform-origin: 0% 0%; + -webkit-transform: scaleY(1); + transform: scaleY(1); + } +} +@keyframes rcDropdownSlideUpIn { + 0% { + opacity: 0; + -webkit-transform-origin: 0% 0%; + transform-origin: 0% 0%; + -webkit-transform: scaleY(0); + transform: scaleY(0); + } + 100% { + opacity: 1; + -webkit-transform-origin: 0% 0%; + transform-origin: 0% 0%; + -webkit-transform: scaleY(1); + transform: scaleY(1); + } +} +@-webkit-keyframes rcDropdownSlideUpOut { + 0% { + opacity: 1; + -webkit-transform-origin: 0% 0%; + transform-origin: 0% 0%; + -webkit-transform: scaleY(1); + transform: scaleY(1); + } + 100% { + opacity: 0; + -webkit-transform-origin: 0% 0%; + transform-origin: 0% 0%; + -webkit-transform: scaleY(0); + transform: scaleY(0); + } +} +@keyframes rcDropdownSlideUpOut { + 0% { + opacity: 1; + -webkit-transform-origin: 0% 0%; + transform-origin: 0% 0%; + -webkit-transform: scaleY(1); + transform: scaleY(1); + } + 100% { + opacity: 0; + -webkit-transform-origin: 0% 0%; + transform-origin: 0% 0%; + -webkit-transform: scaleY(0); + transform: scaleY(0); + } +} +.rc-select-search--dropdown { + display: block; + padding: 4px; +} +.rc-select-search--dropdown .rc-select-search__field { + padding: 4px; + width: 100%; + box-sizing: border-box; + border: 1px solid #d9d9d9; + border-radius: 4px; + outline: none; +} +.rc-select-search--dropdown.rc-select-search--hide { + display: none; +} +.rc-select-open .rc-select-arrow b { + border-color: transparent transparent #888 transparent; + border-width: 0 4px 5px 4px; +} +.rc-select-open .rc-select-dropdown { + display: block; +} +.rc-select-menu { + outline: none; + margin-bottom: 0; + padding-left: 0; + list-style: none; + z-index: 9999; +} +.rc-select-menu-item-group-list { + margin: 0; + padding: 0; +} +.rc-select-menu-item-group-list > li.rc-select-menu-item { + padding-left: 20px; +} +.rc-select-menu-item-group-title { + color: #999; + line-height: 1.5; + padding: 8px 10px; + border-bottom: 1px solid #dedede; +} +li.rc-select-menu-item { + margin: 0; + position: relative; + display: block; + padding: 7px 10px; + font-weight: normal; + color: #666666; + white-space: nowrap; +} +li.rc-select-menu-item:hover, +li.rc-select-menu-item-active, +li.rc-select-menu-item-selected { + background-color: rgba(142, 200, 249, 0.1) !important; +} +li.rc-select-menu-item-disabled { + color: #ccc; + cursor: not-allowed; + pointer-events: none; +} +li.rc-select-menu-item-disabled:hover { + color: #ccc; + background-color: #fff; + cursor: not-allowed; +} +li.rc-select-menu-item-divider { + height: 1px; + margin: 1px 0; + overflow: hidden; + background-color: #e5e5e5; + line-height: 0; +} +