Pagination

Default

Layout

Set layout of Pagination, pass an array or elements separated with a comma

The accepted values:

• prev a button navigating to the previous page
• next a button navigating to the next page
• jumper a jump-to input
• pager page list
• sizes a select to determine page size
• total total item count
• -> Every element after this symbol will be pulled to the right

NOTE

We’ll detect some deprecated usages, if your pagination don’t appeared or worked as expected, please check rules below:

You have to define one of total and page-count, otherwise we can’t determine count of total pages.When both defined, page-count taken as priority. If current-page is defined, you have to listen current-page change, by also define @update:current-page, otherwise pagination didn’t work. If page-size is defined while page size selector displayed(sizes included in layout), you have to listen page-size change as well, by define @update:page-size, otherwise change of page size didn’t work.

Easily add a pagination with the s-pagination component, the required properties are total

Code copied

<template>
  <div class="center con-pagination">
    <s-pagination
      v-model:current-page="page"
      :layout="['total', 'prev', 'pager', 'next', 'jumper', 'sizes']"
      :total="50"
    />
  </div>
</template>

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

const page = ref(1)
</script>

Color

Use the color prop to change the base color of a component and supported child elements. See theme configuration for color and theme details.

Supported values:

• primary
• success
• danger
• warning
• dark
• RGB
• HEX

Code copied

<template>
  <div class="center con-pagination">
    <div class="con-radio">
      <s-radio v-model="color" color="success" value="success">
        Success
      </s-radio>
      <s-radio v-model="color" color="danger" value="danger"> Danger </s-radio>
      <s-radio v-model="color" color="warn" value="warn"> Warning </s-radio>
      <s-radio v-model="color" color="dark" value="dark"> Dark </s-radio>
      <s-radio v-model="color" color="#7d33ff" value="#7d33ff"> HEX </s-radio>
      <s-radio v-model="color" color="rgb(59,222,200)" value="rgb(59,222,200)">
        RGB
      </s-radio>
    </div>
    <s-pagination v-model:current-page="page" :color="color" :total="50" />
  </div>
</template>

<script lang="ts" setup>

import type { Color } from 'sax-design-vue'

const page = ref(1)
const color = ref<Color>('success')
</script>

<style lang="scss" scoped>

  .con-radio {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    .s-radio-wrapper {
      margin: 10px;
    }
  }
  .s-pagination {
    margin: 10px 0px;
  }
}

@media screen and (max-width: 768px) {
  .con-pagination {
    overflow: scroll;
    justify-content: flex-start;
  }
}
</style>

Disabled

Change the disabled state of the component with the disabled property, this property is a boolean and you can add it without value

Code copied

<template>
  <div class="center con-pagination">
    <s-pagination v-model:current-page="page" disabled :total="50" />
  </div>
</template>

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

const page = ref(2)
</script>

Shape

Circle

Change the radius of all the elements that make up the component by making them circular with the circle property, this property is a boolean so it does not need value

Code copied

<template>
  <div class="center con-pagination">
    <s-pagination v-model:current-page="page" shape="circle" :total="50" />
  </div>
</template>

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

const page = ref(1)
</script>

Square

Change the radius of all the elements that make up the component making them square with the square property, this property is a boolean so it does not need value

Code copied

<template>
  <div class="center con-pagination">
    <s-pagination v-model:current-page="page" shape="square" :total="50" />
  </div>
</template>

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

const page = ref(1)
</script>

Buttons Dotted

Use buttons-dotted to replace the inner page numbers with dot-style controls.

Code copied

<template>
  <div class="center con-pagination">
    <s-pagination v-model:current-page="page" buttons-dotted :total="50" />
  </div>
</template>

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

const page = ref(1)
</script>

Disabled Items

You can put disabled buttons specific to the pagination component with the disabled-items property, this property is an array with the number of the button you want to put in disabled status

The buttons that are in disabled will skip when changing the value for example on the next or back buttons

Code copied

<template>
  <div class="center con-pagination">
    <s-pagination
      v-model:current-page="page"
      :disabled-items="[3, 4, 9, 10, 11, 12, 19]"
      :total="50"
    />
  </div>
</template>

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

const page = ref(1)
</script>

<style lang="scss" scoped>
.con-pagination {
  .s-pagination {
    margin: 10px 0px;
  }
}

@media screen and (max-width: 768px) {
  .con-pagination {
    overflow: scroll;
    justify-content: flex-start;
  }
}
</style>

Loading Items

You can make a button inside the pagination be in the state of loading with the loading-items property, this property is an array with the number of the button that you want to put in the disabled state

The buttons that are in loading will skip when changing the value for example in the next or back buttons

Code copied

<template>
  <div class="center con-pagination">
    <s-pagination
      v-model:current-page="page"
      :loading-items="[3, 4, 9, 10, 11, 12, 19]"
      :total="50"
    />
  </div>
</template>

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

const page = ref(1)
</script>

Not Margin

Change the style of the entire component by removing the margin between the buttons and changing the radius with the not-margin property

Code copied

<template>
  <div class="center con-pagination">
    <s-pagination v-model:current-page="page" not-margin :total="50" />
  </div>
</template>

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

const page = ref(1)
</script>

Progress

Add a progress bar to the pagination by referencing where you find the last page with the progress property

Code copied

<template>
  <div class="center con-pagination">
    <s-pagination v-model:current-page="page" progress :total="50" />
  </div>
</template>

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

const page = ref(1)
</script>

Infinite

You can make the pagination infinite with the infinite property, this means that the arrow buttons are no longer in the disabled state

Code copied

<template>
  <div class="center con-pagination">
    <s-pagination v-model:current-page="page" infinite :total="50" />
  </div>
</template>

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

const page = ref(1)
</script>

API