56 lines
1.1 KiB
Vue
56 lines
1.1 KiB
Vue
<template>
|
|
<nav class="navigation">
|
|
<button @click="$emit('prevPage')" :disabled="currentPage === 1">{{ __('navigation.previous') }}</button>
|
|
<span>{{ __('navigation.page_of', { currentPage: currentPage, totalPages: totalPages }) }}</span>
|
|
<button @click="$emit('nextPage')" :disabled="currentPage === totalPages">{{ __('navigation.next') }}</button>
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
currentPage: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
totalPages: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const emits = defineEmits(['prevPage', 'nextPage']);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.navigation {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20px;
|
|
background-color: #f0f0f0;
|
|
width: 100%;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.navigation button {
|
|
background-color: #007bff;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
margin: 0 10px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.navigation button:disabled {
|
|
background-color: #cccccc;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.navigation span {
|
|
font-size: 1.2em;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
</style> |