Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pagination: add background prop #8553

Merged
merged 1 commit into from
Nov 29, 2017
Merged

Pagination: add background prop #8553

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions examples/docs/en-US/pagination.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,18 @@ If you have too much data to display in one page, use pagination.
```
:::

### Buttons with background color

:::demo Set the `background` attribute and the buttons will have a background color.
```html
<el-pagination
background
layout="prev, pager, next"
:total="1000">
</el-pagination>
```
:::

### Small Pagination

Use small pagination in the case of limited space.
Expand Down Expand Up @@ -199,6 +211,7 @@ Add more modules based on your scenario.
| Attribute | Description | Type | Accepted Values | Default |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| small | whether to use small pagination | boolean | — | false |
| background | whether the buttons have a background color | Boolean | — | false |
| page-size | item count of each page | number | — | 10 |
| total | total item count | number | — | — |
| page-count | total page count. Set either `total` or `page-count` and pages will be displayed; if you need `page-sizes`, `total` is required | number | — | — |
Expand Down
13 changes: 13 additions & 0 deletions examples/docs/zh-CN/pagination.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,18 @@
```
:::

### 带有背景色的分页

:::demo 设置`background`属性可以为分页按钮添加背景色。
```html
<el-pagination
background
layout="prev, pager, next"
:total="1000">
</el-pagination>
```
:::

### 小型分页

在空间有限的情况下，可以使用简单的小型分页。
Expand Down Expand Up @@ -199,6 +211,7 @@
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| small | 是否使用小型分页样式 | Boolean | — | false |
| background | 是否为分页按钮添加背景色 | Boolean | — | false |
| page-size | 每页显示条目个数 | Number | — | 10 |
| total | 总条目数 | Number | — | — |
| page-count | 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 | Number | — | — |
Expand Down
13 changes: 7 additions & 6 deletions packages/pagination/src/pagination.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,9 @@ export default {

prevText: String,

nextText: String
nextText: String,

background: Boolean
},

data() {
Expand All @@ -51,7 +53,10 @@ export default {
},

render(h) {
let template = <div class='el-pagination'></div>;
let template = <div class={['el-pagination', {
'is-background': this.background,
'el-pagination--small': this.small
}] }></div>;
const layout = this.layout || '';
if (!layout) return;
const TEMPLATE_MAP = {
Expand All @@ -67,10 +72,6 @@ export default {
const rightWrapper = <div class="el-pagination__rightwrapper"></div>;
let haveRightWrapper = false;

if (this.small) {
template.data.class += ' el-pagination--small';
}

components.forEach(compo => {
if (compo === '->') {
haveRightWrapper = true;
Expand Down
45 changes: 43 additions & 2 deletions packages/theme-chalk/src/pagination.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@
.el-icon {
display: block;
font-size: 12px;
font-weight: bold;
}
}

Expand Down Expand Up @@ -162,6 +163,46 @@
margin: 0;
}
}

@include when(background) {
.btn-prev,
.btn-next,
.el-pager li {
margin: 0 5px;
background-color: $--color-info-lighter;
color: $--color-text-regular;
min-width: 30px;
border-radius: 2px;
}

.btn-prev, .btn-next {
padding: 0;

&.disabled {
color: $--color-text-placeholder;
}
}

.el-pager li {
&:hover {
color: $--pagination-hover-fill;
}

&.active {
background-color: $--color-primary;
color: $--color-white;
}
}

&.el-pagination--small {
.btn-prev,
.btn-next,
.el-pager li {
margin: 0 3px;
min-width: 22px;
}
}
}
}

@include b(pager) {
Expand All @@ -173,8 +214,8 @@
padding: 0;
margin: 0;

.el-icon-more::before {
vertical-align: -4px;
.more::before {
line-height: 30px;
}

li {
Expand Down