Skip to content

Allow to set position for the pagination component #332

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

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 3 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
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 'top', 'top-overlay', 'bottom-overlay'.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A little nitpick but "bottom" should be a possible value

Copy link
Contributor

@ashleysimpson ashleysimpson Dec 4, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Weird, the reply feature doesn't reply to the message but adds a comment in the PR. Anyway, it's not a big deal. I know it's a default, I just personally like to add all the cases for completeness 😛

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, one thing I will mention is that you are missing the docs in the README.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ashleysimpson thanks for the feedback! It was my first attempt to reply using email (and probably my last seeing the limitations it has).

So regarding your comments, to be honest, I have no opinion about that and I prefer to do what best matches the project. I'll be adding a commit ASAP.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good! And thanks for the contribution 😃

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Np. I've added a commit that should cover your feedback. Please let me know if something is missing.

Thank you


* **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