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

Allow to set position for the pagination component #332

Merged
merged 4 commits into from
Dec 5, 2018
Merged

Allow to set position for the pagination component #332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6a8cd38
feat(config): allow to overlay pagination component
am Nov 29, 2018
7aec6df
feat(config): allow to set the pagination position
am Nov 29, 2018
4fb8055
docs(config): add pagination position
am Nov 29, 2018
89325fd
docs(): improve paginationPosition description and add to README
am Dec 4, 2018
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
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ export default {
| navigationPrevLabel | String | ◀ | Text content of the navigation prev button. |
| paginationActiveColor | String | #000000 | The fill color of the active pagination dot. Any valid CSS color is accepted. |
| paginationColor | String | #efefef | The fill color of pagination dots. Any valid CSS color is accepted. |
| 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. |
| paginationEnabled | Boolean | true | Flag to render pagination component. |
| paginationPadding | Number | 10 | The padding inside each pagination dot. Pixel values are accepted. |
| paginationSize | Number | 10 | The size of each pagination dot. Pixel values are accepted. |
Expand Down
7 changes: 7 additions & 0 deletions docs/source/api/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,6 +221,13 @@ The fill color of pagination dots. Any valid CSS color is accepted.
* **Type**: `String`
* **Default**: `#efefef`

### paginationPosition

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.

* **Type**: `String`
* **Default**: `bottom`

### paginationPadding

The padding inside each pagination dot. Pixel values are accepted.
Expand Down
9 changes: 9 additions & 0 deletions play/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -370,3 +370,12 @@ play("Carousel", module)
}
}
})
.add("Pagination position top", h => createContainer(
h, containerWidth, [h(Carousel, { props: { paginationPosition: 'top' } }, generateSlideImages(h))]
))
.add("Pagination position top-overlay", h => createContainer(
h, containerWidth, [h(Carousel, { props: { paginationPosition: 'top-overlay' } }, generateSlideImages(h))]
))
.add("Pagination position bottom-overlay", h => createContainer(
h, containerWidth, [h(Carousel, { props: { paginationPosition: 'bottom-overlay' } }, generateSlideImages(h))]
))
21 changes: 19 additions & 2 deletions src/Carousel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
<template>
<section class="VueCarousel">
<section
class="VueCarousel"
v-bind:class="{ 'VueCarousel--reverse': paginationPosition === 'top' }"
>
<div
class="VueCarousel-wrapper"
ref="VueCarousel-wrapper"
Expand Down Expand Up @@ -164,7 +167,7 @@ export default {
type: Boolean,
default: true
},
/*
/**
* Flag to toggle touch dragging
*/
touchDrag: {
Expand Down Expand Up @@ -238,6 +241,14 @@ export default {
type: Number,
default: 10
},
/**
* Configure the position for the pagination component.
* The possible values are: 'bottom', 'top', 'bottom-overlay' and 'top-overlay'
*/
paginationPosition: {
type: String,
default: "bottom"
},
/**
* The size of each pagination dot
* Pixel values are accepted
Expand Down Expand Up @@ -878,9 +889,15 @@ export default {
</script>
<style>
.VueCarousel {
display: flex;
flex-direction: column;
position: relative;
}

.VueCarousel--reverse {
flex-direction: column-reverse;
}

.VueCarousel-wrapper {
width: 100%;
position: relative;
Expand Down
29 changes: 27 additions & 2 deletions src/Pagination.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
<template>
<div v-show="carousel.pageCount > 1" class="VueCarousel-pagination">
<div
v-show="carousel.pageCount > 1"
class="VueCarousel-pagination"
v-bind:class="{ [`VueCarousel-pagination--${paginationPositionModifierName}`]: paginationPositionModifierName }"
>
<ul class="VueCarousel-dot-container" role="tablist">
<li
class="VueCarousel-dot"
Expand All @@ -11,7 +15,7 @@
:key="`${page}_${index}`"
v-on:click="goToPage(index)"
:style="`
margin-top: ${carousel.paginationPadding * 2}px;
margin-${paginationPropertyBasedOnPosition}: ${carousel.paginationPadding * 2}px;
padding: ${carousel.paginationPadding}px;
`"
>
Expand All @@ -38,6 +42,17 @@ export default {
name: "pagination",
inject: ["carousel"],
computed: {
paginationPositionModifierName() {
const { paginationPosition } = this.carousel;
// guard to add only required class modifiers
if (paginationPosition.indexOf("overlay") < 0) return;
return paginationPosition;
},
paginationPropertyBasedOnPosition() {
return this.carousel.paginationPosition.indexOf("top") >= 0
? "bottom"
: "top";
},
paginationCount() {
return this.carousel && this.carousel.scrollPerPage
? this.carousel.pageCount
Expand Down Expand Up @@ -78,6 +93,16 @@ export default {
text-align: center;
}

.VueCarousel-pagination--top-overlay {
position: absolute;
top: 0;
}

.VueCarousel-pagination--bottom-overlay {
position: absolute;
bottom: 0;
}

.VueCarousel-dot-container {
display: inline-block;
margin: 0 auto;
Expand Down