Morpheme

Appearance

Pagination ​

The VPagination component is used to create a pagination element for dividing content into multiple pages.

Usage ​

Basic Usage ​

To use VPagination, you need to pass in at least two props: v-model, which binds the component to a page number, and total-items, which specifies the total number of items being paginated. You can also specify how many items are displayed per page using the items-per-page prop.

Variants ​

The pagination component supports three variants by default in which default, text and text-rounded.

Sizes ​

You can customize the size of the pagination element using the size prop, which can be set to sm, md (default), or lg.

Flat ​

To create a flat-style pagination element, set the flat prop to true.

Custom Style ​

You can customize the appearance of the pagination element by passing in a style object using the style prop.

Slots ​

You can customize the text and icons of the pagination buttons using slots. Available slots are:

  • btnPrev: the "previous" button
  • btnNext: the "next" button
  • btnFirst: the "first" button
  • btnLast: the "last" button

Props ​

NameTypeDefaultDescription
modelValuenumber1The page number that the pagination element is bound to.
showFirstbooleantrueDetermines whether the "first" button is displayed.
showPreviousbooleantrueDetermines whether the "previous" button is displayed.
showNextbooleantrueDetermines whether the "next" button is displayed.
showLastbooleantrueDetermines whether the "last" button is displayed.
totalItemsnumber0The total number of items being paginated.
siblingCountnumber1The number of page numbers displayed to the left and right of the active page number.
boundaryCountnumber1The number of page numbers displayed at the beginning and end of the list of page numbers.
itemsPerPagenumber10The number of items displayed on each page.
activeClassstring''A class name applied to the active page number.
defaultClassstring''A class name applied to the default page numbers.
simplebooleanfalseDetermines whether the pagination element is displayed as a simple list of page numbers.
flatbooleanfalseDetermines whether the pagination element has a flat style.
sizesm | md | lgmdThe size of the pagination element.
prevIconString'heroicons:chevron-left-20-solid'The icon displayed in the "previous" button.
nextIconString'heroicons:chevron-right-20-solid'The icon displayed in the "next" button.
firstIconString'heroicons:chevron-double-left-20-solid'The icon displayed in the "first" button.
lastIconString'heroicons:chevron-double-right-20-solid'The icon displayed in the "last" button.
iconSizeString'sm'The size of icon.
iconClassString''A class name applied to the icon number.

Events ​

update:modelValue ​

Emitted when the modelValue prop is changed. You can use this event to respond to changes in the active page number.

vue
<script setup lang="ts">
import {ref} from 'vue';

const page = ref(1);

const onChange = (val: number) => console.log('Changed!', val);
</script>

<template>
  <VPagination v-model="page" @update:modelValue="onChange" />
</template>
<script setup lang="ts">
import {ref} from 'vue';

const page = ref(1);

const onChange = (val: number) => console.log('Changed!', val);
</script>

<template>
  <VPagination v-model="page" @update:modelValue="onChange" />
</template>

Slots ​

The VPagination component has several slots that allow you to customize the text and icons of the pagination buttons.

ellipsis ​

Use this slot to customize the text or icon displayed as an ellipsis.

vue
<template>
  <VPagination>
    <template #ellipsis> ... </template>
  </VPagination>
</template>
<template>
  <VPagination>
    <template #ellipsis> ... </template>
  </VPagination>
</template>

btnPrev ​

Use this slot to customize the text or icon displayed in the "previous" button.

vue
<template>
  <VPagination>
    <template #btnPrev> Previous </template>
  </VPagination>
</template>
<template>
  <VPagination>
    <template #btnPrev> Previous </template>
  </VPagination>
</template>

btnNext ​

Use this slot to customize the text or icon displayed in the "next" button.

vue
<template>
  <VPagination>
    <template #btnNext> Next </template>
  </VPagination>
</template>
<template>
  <VPagination>
    <template #btnNext> Next </template>
  </VPagination>
</template>

btnFirst ​

Use this slot to customize the text or icon displayed in the "first" button.

vue
<template>
  <VPagination>
    <template #btnFirst> First </template>
  </VPagination>
</template>
<template>
  <VPagination>
    <template #btnFirst> First </template>
  </VPagination>
</template>

btnLast ​

Use this slot to customize the text or icon displayed in the "last" button.

vue
<template>
  <VPagination>
    <template #btnLast> Last </template>
  </VPagination>
</template>
<template>
  <VPagination>
    <template #btnLast> Last </template>
  </VPagination>
</template>

CSS Variables ​

scss
:root {
  --v-pagination-shadow: var(--effect-shadow-xs);
  --v-pagination-border-radius: var(--border-radius-lg);
  --v-pagination-gap: var(--size-spacing-0);

  /* item */
  --v-pagination-item-padding-x: var(--size-spacing-4);
  --v-pagination-item-padding-y: var(--size-spacing-2);
  --v-pagination-item-bg-color: var(--color-white);
  --v-pagination-item-text-color: var(--color-gray-700);
  --v-pagination-item-border-color: var(--color-gray-300);
  --v-pagination-item-border-radius: var(--border-radius-lg);
  --v-pagination-item-border-width: 1px;
  --v-pagination-item-font-size: var(--size-font-sm);
  --v-pagination-item-font-weight: var(--font-weight-semibold);
  --v-pagination-item-height: 40px;
  --v-pagination-item-gap: var(--size-spacing-2);

  /* item active */
  --v-pagination-item-active-bg-color: var(--color-primary-500);
  --v-pagination-item-active-border-color: var(--color-primary-500);
  --v-pagination-item-active-text-color: var(--color-white);

  /* item hover */
  --v-pagination-item-hover-bg-color: var(--color-gray-50);

  /* item disabled */
  --v-pagination-item-disabled-bg-color: var(--v-pagination-item-bg-color);
  --v-pagination-item-disabled-border-color: var(--v-pagination-item-border-color);
  --v-pagination-item-disabled-text-color: var(--color-gray-400);

  /* item action */
  --v-pagination-item-action-padding-x: var(--size-spacing-2);
  --v-pagination-item-action-padding-y: var(--size-spacing-2);
  /* action sm */
  --v-pagination-sm-item-action-padding-x: var(--size-spacing-2);
  --v-pagination-sm-item-action-padding-y: var(--size-spacing-2);
  /* action sm */
  --v-pagination-lg-item-action-padding-x: var(--size-spacing-4);
  --v-pagination-lg-item-action-padding-y: var(--size-spacing-4);
}
:root {
  --v-pagination-shadow: var(--effect-shadow-xs);
  --v-pagination-border-radius: var(--border-radius-lg);
  --v-pagination-gap: var(--size-spacing-0);

  /* item */
  --v-pagination-item-padding-x: var(--size-spacing-4);
  --v-pagination-item-padding-y: var(--size-spacing-2);
  --v-pagination-item-bg-color: var(--color-white);
  --v-pagination-item-text-color: var(--color-gray-700);
  --v-pagination-item-border-color: var(--color-gray-300);
  --v-pagination-item-border-radius: var(--border-radius-lg);
  --v-pagination-item-border-width: 1px;
  --v-pagination-item-font-size: var(--size-font-sm);
  --v-pagination-item-font-weight: var(--font-weight-semibold);
  --v-pagination-item-height: 40px;
  --v-pagination-item-gap: var(--size-spacing-2);

  /* item active */
  --v-pagination-item-active-bg-color: var(--color-primary-500);
  --v-pagination-item-active-border-color: var(--color-primary-500);
  --v-pagination-item-active-text-color: var(--color-white);

  /* item hover */
  --v-pagination-item-hover-bg-color: var(--color-gray-50);

  /* item disabled */
  --v-pagination-item-disabled-bg-color: var(--v-pagination-item-bg-color);
  --v-pagination-item-disabled-border-color: var(--v-pagination-item-border-color);
  --v-pagination-item-disabled-text-color: var(--color-gray-400);

  /* item action */
  --v-pagination-item-action-padding-x: var(--size-spacing-2);
  --v-pagination-item-action-padding-y: var(--size-spacing-2);
  /* action sm */
  --v-pagination-sm-item-action-padding-x: var(--size-spacing-2);
  --v-pagination-sm-item-action-padding-y: var(--size-spacing-2);
  /* action sm */
  --v-pagination-lg-item-action-padding-x: var(--size-spacing-4);
  --v-pagination-lg-item-action-padding-y: var(--size-spacing-4);
}

Standalone Installation ​

You can also install the Pagination component individually via @morpheme/pagination package:

bash
npm i @morpheme/pagination
npm i @morpheme/pagination
vue
<script setup lang="ts">
import VPagination from '@morpheme/pagination';
</script>

<template>
  <VPagination />
</template>
<script setup lang="ts">
import VPagination from '@morpheme/pagination';
</script>

<template>
  <VPagination />
</template>

Storybook ​

View Storybook documentation here.