gradido/frontend/src/components/PaginationButtons.vue
2021-07-08 09:37:51 +02:00

31 lines
929 B
Vue

<template>
<div class="pagination-buttons">
<b-row class="m-4">
<b-col class="text-right">
<b-button class="previous-page" :disabled="!hasPrevious" @click="$emit('show-previous')">
<b-icon icon="chevron-left" variant="primary"></b-icon>
</b-button>
</b-col>
<b-col cols="3">
<p class="text-center pt-2">{{ currentPage }} / {{ totalPages }}</p>
</b-col>
<b-col>
<b-button class="next-page" :disabled="!hasNext" @click="$emit('show-next')">
<b-icon icon="chevron-right" variant="primary"></b-icon>
</b-button>
</b-col>
</b-row>
</div>
</template>
<script>
export default {
name: 'PaginationButtons',
props: {
hasNext: { type: Boolean, default: false },
hasPrevious: { type: Boolean, default: false },
totalPages: { type: Number, default: 1 },
currentPage: { type: Number, default: 1 },
},
}
</script>