Skip to content

Kirby 3.7.5

Pagination

<k-pagination>

This UI component hasn't been finalized yet. The functionality and syntax aren't stable and might be redone in an upcoming release. Only use it at your own risk - breaking changes are likely to occur.

<k-pagination
  align="center"
  :details="true"
  :page="5"
  :total="125"
  :limit="10" />

Props

Prop Type Default Description
align
string
Supported values:
left, centre, right
"left"
The align prop makes it possible to move the pagination component according to the wrapper component.
details
boolean
false
Show/hide the details display with the page selector in the center of the two navigation buttons.
dropdown
boolean
true
keys
boolean
false
Enable/disable keyboard navigation
limit
number
10
Sets the limit of items to be shown per page
nextLabel
string
function() { return window.panel.$t("next"); }
Sets the label for the next arrow button
page
number
1
Sets the current page
pageLabel
string
function() { return window.panel.$t("pagination.page"); }
Sets the label for the page selector
prevLabel
string
function() { return window.panel.$t("prev"); }
Sets the label for the prev arrow button
total
number
0
Sets the total number of items that are in the paginated list. This has to be set higher to 0 to activate pagination.
validate
func
function() { return Promise.resolve(); }

Methods

Method Parameters Description
goTo
  • page
Jump to the given page
next Jump to the next page
prev Jump to the previous page

Events

Event Description Passes
paginate

Events

paginate

Listening to the paginate event is the most straight forward way to react to the pagination component.

<template>
  <section>
    <h2>Paginated items</h2>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.title }}</li>
    </ul>
    <k-pagination :total="total" @paginate="fetch" />
  </section>
</template>

<script>
export default {
  data() {
    total: 0,
    items: []
  },
  created() {
    this.fetch({ page: 1 });
  },
  methods: {
    fetch(pagination) {
      return this.$api
        .get('/projects.json', { page: pagination.page })
        .then(response => {
          this.items = response.data;
          this.total = response.total;
        });
    }
  }
};
</script>

CSS classes

.k-pagination