vue2-custom-pagination

Completely customizable custom pagination component for vue.js version 2.

TABLE OF CONTENTS

• Example
• Component Props
• Default Template Slot Props
• Divisor Template Slot Props
• Notes

Example:

To use this component, you must provide a template for the pagination elements and a v-model for controlling the active page. You must provide both listLength and pageSize or only numberOfTabs props.

In this example, we're using a scope of 5, which means the distance between the center active element and the corners of the container will be inclusively 5 elements. We're also using the isActive to show the active blue element, the isMin and isMax to add a border-radius to all sides on the element "1" and the element "970", and isFirst and isLast for adding a curved border only on the "30"/"38" corners.

<Pagination
  v-model="currentPage"
  :listLength="items.length"
  :pageSize="25"
  :scope='5'
>
  <template v-slot='{number, classObj}'> // classObj: isMin, isMax, isFirst, isLast, isActive
    <span
      class="el"
      :class="classObj"
      @click="currentPage = number"
    >
      {{ number }}
    </span>
  </template>
  <template v-slot:divisor={isFirst, isLast}>
    <span style="dots">
      ...
    </span>
  </template>
</Pagination>

.el {
  padding: 6px;
  display: inline-flex;
  justify-content: center;
  align-content: center;
  min-width: 30px;
  background-color: white;
  transition-duration: .125s;
  cursor: pointer;
}

.el:hover, .isActive { 
  color: white;
  background-color: #1E4369;
}

.isLast, .isMin, .isMax {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.isFirst, .isMin, .isMax {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.dots {
  font-size: 18px;
  margin: 0 12px;
}

Component Props

Prop	Type	Default	Description
value	Number	1	Used on v-model.
numberOfTabs	Number	undefined	Sometimes you know exactly how many tabs you need, on these cases you should use this prop.
scope	Number	4	It's the inclusive distance between the active element and the corners.
listLength	Number	undefined	When you don't know exactly the number of tabs you need, you should use this prop in conjunction with the pageSize prop. The component will automatically calculate the number of tabs.
pageSize	Number	undefined	The number of items in each page, should be used with listLength.

Default Template Slot Props

The template receives slot props which can be used on your template. It has the number containing the page index and classObj which has a series booleans for class binding.

Property	Description
isActive	Styles the active page element.
isMax	Styles the last item after the divisor.
isMin	Styles only the first item right before the divisor.
isLast	Styles the last item between the divisors.
isFirst	Styles the first item between the divisors.

Divisor Template Slot Props

You can also add a custom divisor template, it's the component that will be rendered between the last element and the first element when necessary. It receives {isFirst: boolean, isLast: boolean} slot props.

Property	Description
isFirst	Styles the first divisor after the first page element.
isLast	Styles the last divisor after the last page element.

Notes

The component uses "display: flex;justify-content: center" to centralize its elements, if you want to change the alignment, simply override these styles.

<Pagination class="pagination"
  ...
  ...
  ...

.pagination {
  justify-content: flex-start !important;
}