Skip to content

Commit 198b864

Browse files
amquinnlangille
authored andcommitted
Allow to set position for the pagination component (#332)
* feat(config): allow to overlay pagination component * feat(config): allow to set the pagination position * docs(config): add pagination position * docs(): improve paginationPosition description and add to README
1 parent f0733b0 commit 198b864

File tree

5 files changed

+63
-4
lines changed

5 files changed

+63
-4
lines changed

README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ export default {
8080
| navigationPrevLabel | String || Text content of the navigation prev button. |
8181
| paginationActiveColor | String | #000000 | The fill color of the active pagination dot. Any valid CSS color is accepted. |
8282
| paginationColor | String | #efefef | The fill color of pagination dots. Any valid CSS color is accepted. |
83+
| paginationPosition | String | bottom | The position of pagination dots. Possible values are `bottom`, `bottom-overlay`, `top` and `top-overlay`. The overlay values place the pagination component over the images. |
8384
| paginationEnabled | Boolean | true | Flag to render pagination component. |
8485
| paginationPadding | Number | 10 | The padding inside each pagination dot. Pixel values are accepted. |
8586
| paginationSize | Number | 10 | The size of each pagination dot. Pixel values are accepted. |

docs/source/api/index.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -221,6 +221,13 @@ The fill color of pagination dots. Any valid CSS color is accepted.
221221
* **Type**: `String`
222222
* **Default**: `#efefef`
223223

224+
### paginationPosition
225+
226+
The position of pagination dots. Possible values are `bottom`, `bottom-overlay`, `top` and `top-overlay`. The overlay values place the pagination component over the images.
227+
228+
* **Type**: `String`
229+
* **Default**: `bottom`
230+
224231
### paginationPadding
225232

226233
The padding inside each pagination dot. Pixel values are accepted.

play/index.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -374,3 +374,12 @@ play("Carousel", module)
374374
}
375375
}
376376
})
377+
.add("Pagination position top", h => createContainer(
378+
h, containerWidth, [h(Carousel, { props: { paginationPosition: 'top' } }, generateSlideImages(h))]
379+
))
380+
.add("Pagination position top-overlay", h => createContainer(
381+
h, containerWidth, [h(Carousel, { props: { paginationPosition: 'top-overlay' } }, generateSlideImages(h))]
382+
))
383+
.add("Pagination position bottom-overlay", h => createContainer(
384+
h, containerWidth, [h(Carousel, { props: { paginationPosition: 'bottom-overlay' } }, generateSlideImages(h))]
385+
))

src/Carousel.vue

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<template>
2-
<section class="VueCarousel">
2+
<section
3+
class="VueCarousel"
4+
v-bind:class="{ 'VueCarousel--reverse': paginationPosition === 'top' }"
5+
>
36
<div
47
class="VueCarousel-wrapper"
58
ref="VueCarousel-wrapper"
@@ -164,7 +167,7 @@ export default {
164167
type: Boolean,
165168
default: true
166169
},
167-
/*
170+
/**
168171
* Flag to toggle touch dragging
169172
*/
170173
touchDrag: {
@@ -238,6 +241,14 @@ export default {
238241
type: Number,
239242
default: 10
240243
},
244+
/**
245+
* Configure the position for the pagination component.
246+
* The possible values are: 'bottom', 'top', 'bottom-overlay' and 'top-overlay'
247+
*/
248+
paginationPosition: {
249+
type: String,
250+
default: "bottom"
251+
},
241252
/**
242253
* The size of each pagination dot
243254
* Pixel values are accepted
@@ -881,9 +892,15 @@ export default {
881892
</script>
882893
<style>
883894
.VueCarousel {
895+
display: flex;
896+
flex-direction: column;
884897
position: relative;
885898
}
886899
900+
.VueCarousel--reverse {
901+
flex-direction: column-reverse;
902+
}
903+
887904
.VueCarousel-wrapper {
888905
width: 100%;
889906
position: relative;

src/Pagination.vue

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
<template>
2-
<div v-show="carousel.pageCount > 1" class="VueCarousel-pagination">
2+
<div
3+
v-show="carousel.pageCount > 1"
4+
class="VueCarousel-pagination"
5+
v-bind:class="{ [`VueCarousel-pagination--${paginationPositionModifierName}`]: paginationPositionModifierName }"
6+
>
37
<ul class="VueCarousel-dot-container" role="tablist">
48
<li
59
class="VueCarousel-dot"
@@ -11,7 +15,7 @@
1115
:key="`${page}_${index}`"
1216
v-on:click="goToPage(index)"
1317
:style="`
14-
margin-top: ${carousel.paginationPadding * 2}px;
18+
margin-${paginationPropertyBasedOnPosition}: ${carousel.paginationPadding * 2}px;
1519
padding: ${carousel.paginationPadding}px;
1620
`"
1721
>
@@ -38,6 +42,17 @@ export default {
3842
name: "pagination",
3943
inject: ["carousel"],
4044
computed: {
45+
paginationPositionModifierName() {
46+
const { paginationPosition } = this.carousel;
47+
// guard to add only required class modifiers
48+
if (paginationPosition.indexOf("overlay") < 0) return;
49+
return paginationPosition;
50+
},
51+
paginationPropertyBasedOnPosition() {
52+
return this.carousel.paginationPosition.indexOf("top") >= 0
53+
? "bottom"
54+
: "top";
55+
},
4156
paginationCount() {
4257
return this.carousel && this.carousel.scrollPerPage
4358
? this.carousel.pageCount
@@ -78,6 +93,16 @@ export default {
7893
text-align: center;
7994
}
8095
96+
.VueCarousel-pagination--top-overlay {
97+
position: absolute;
98+
top: 0;
99+
}
100+
101+
.VueCarousel-pagination--bottom-overlay {
102+
position: absolute;
103+
bottom: 0;
104+
}
105+
81106
.VueCarousel-dot-container {
82107
display: inline-block;
83108
margin: 0 auto;

0 commit comments

Comments
 (0)