# Pagination

Pagination component with indicators.

# Most common usage scenario

<template>
  <SfPagination
    :current="current"
    :visible="visible"
    :total="total"
    :has-arrows="hasArrows"
    @click="(value) => (current = value)"
  />
</template>
<script>
import { SfPagination } from "@storefront-ui/vue";
export default {
  components: {
    SfPagination,
  },
  data() {
    return {
      current: 2,
      visible: 5,
      total: 12,
      hasArrows: true,
    };
  },
};
</script>

# Props

  • total

    • Total number of pages
    • type: number
    • defaultValue: 0
  • visible

    • Maximum visible pagination items
    • type: number
    • defaultValue: 5
  • hasArrows

    • Status of arrows display
    • type: boolean
    • defaultValue: true
  • current

    • Current page number, for non router
    • type: number
    • defaultValue: 1
  • pageParamName

    • Name of page query param for router
    • type: string
    • defaultValue: "page"

# Slots

  • prev

    • Custom markup for previous page button
    • bindings: isDisabled, prev
  • number

    • bindings: page
  • points

  • next

    • Custom markup for previous page button
    • bindings: isDisabled, next

# Events

  • click

# CSS modifiers

  • .sf-pagination__item--prev
  • .sf-pagination__item--next
  • .sf-pagination__item--current

# CSS custom properties (variables)

  • --pagination-item-width
  • --pagination-item-height
  • --pagination-item-margin
  • --pagination-font
  • --pagination-font-weight
  • --pagination-font-size
  • --pagination-font-line-height
  • --pagination-font-family

# Overridden other components CSS variables

  • --link-text-decoration
  • --link-color

You can override CSS variables values bound to this component.

# Play with this component

See all available configurations and play with this component on Storybook.