Pagination items are automatically generated based on the items-total and the items-per-page properties. The currently selected page is accessible using v-model.
<script>
export default {
data() {
return {
page: 1,
itemsPerPage: 20,
itemsTotal: 300
};
}
};
</script>
<template>
<IPagination v-model="page" :items-total="itemsTotal" :items-per-page="itemsPerPage" />
</template>
Inkline comes with two predefined pagination styles. You can set the color style of the <IPagination> component using the color property, which can be light or dark. By default, pagination uses the light color.
<script>
export default {
data() {
return {
page: 1,
itemsPerPage: 20,
itemsTotal: 300
};
}
};
</script>
<template>
<IPagination
v-model="page"
:items-total="itemsTotal"
:items-per-page="itemsPerPage"
color="light"
/>
<IPagination
v-model="page"
:items-total="itemsTotal"
:items-per-page="itemsPerPage"
color="dark"
/>
</template>
You're able to use the size property to control the size of your pagination items, using one of the available sizes: sm, md, and lg. The default size is set to md.
<script>
export default {
data() {
return {
page: 1,
itemsPerPage: 20,
itemsTotal: 300
};
}
};
</script>
<template>
<IPagination
v-model="page"
:items-total="itemsTotal"
:items-per-page="itemsPerPage"
size="sm"
/>
<IPagination
v-model="page"
:items-total="itemsTotal"
:items-per-page="itemsPerPage"
size="md"
/>
<IPagination
v-model="page"
:items-total="itemsTotal"
:items-per-page="itemsPerPage"
size="lg"
/>
</template>
You're able to use the limit modifier to control how many items to show besides the first and last items, including the two ellipsis pagination items.
Make sure this value is an odd number to have the active item centered.
<script>
export default {
data() {
return {
page: 1,
itemsPerPage: 20,
itemsTotal: 300
};
}
};
</script>
<template>
<IPagination
v-model="page"
:limit="3"
:items-total="itemsTotal"
:items-per-page="itemsPerPage"
/>
</template>
To make things even better, you can responsively control the number of items at each breakpoint, to make sure your design always looks great.
<script>
export default {
data() {
return {
page: 1,
itemsPerPage: 20,
itemsTotal: 300,
limitResponsive: {
xs: 3,
sm: 3
}
};
}
};
</script>
<template>
<IPagination
v-model="page"
:limit="limitResponsive"
:items-total="itemsTotal"
:items-per-page="itemsPerPage"
/>
</template>
You're able to use the quickLink property to allow the user to click the … item to quickly jump through pages, a number of items equal to limit at a time.
<script>
export default {
data() {
return {
page: 1,
itemsPerPage: 20,
itemsTotal: 300
};
}
};
</script>
<template>
<IPagination
v-model="page"
quick-link
:items-total="itemsTotal"
:items-per-page="itemsPerPage"
/>
</template>