Pagination

Pagination provides navigation for large series of related content.

Example

Pagination items are automatically generated based on the total item count items and how many items will be displayed on the page, configured using items-per-page, with the default value being 20. The currently selected page is kept synchronised using v-model.

<i-pagination v-model="currentPage" :items="300" :items-per-page="20"></i-pagination>

export default {
  data () {
    return {
      currentPage: 1
    };
  }
}

Variants

Inkline includes two predefined pagination styles. You can set the style of a <i-pagination> using the variant property, which can have a value of light or dark. By default, pagination uses the light variant.

<i-pagination v-model="currentPage" variant="light" :items="100" :items-per-page="10"></i-pagination>

<i-pagination v-model="currentPage" variant="dark" :items="100" :items-per-page="10"></i-pagination>

export default {
  data () {
    return {
      currentPage: 1
    };
  }
}

Sizes

You're able to use the size modifier 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.

<i-pagination v-model="currentPage" size="sm" :items="100" :items-per-page="10"></i-pagination>

<i-pagination v-model="currentPage" size="md" :items="100" :items-per-page="10"></i-pagination>

<i-pagination v-model="currentPage" size="lg" :items="100" :items-per-page="10"></i-pagination>

export default {
  data () {
    return {
      currentPage: 1
    };
  }
}

Limit

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 for best results.

<i-pagination v-model="currentPage" :limit="3" :items="100" :items-per-page="10"></i-pagination>

export default {
  data () {
    return {
      currentPage: 1
    };
  }
}

To make things even better, you can responsively control the number of items at each breakpoint, to make sure your design always looks great.

<i-pagination v-model="currentPage" :limit="pageLimit" :items="100" :items-per-page="10"></i-pagination>

export default {
  data () {
    return {
      currentPage: 1,
      pageLimit: {
          xs: 3,
          sm: 5,
          md: 7
      }
    };
  }
}

Quick Links

You're able to use the quickLink modifier to allow the user to click the … item to quickly jump through pages, a number of items equal to limit at a time.

<i-pagination v-model="currentPage" quick-link :items="100" :items-per-page="10"></i-pagination>

export default {
  data () {
    return {
      currentPage: 1
    };
  }
}

Component API

Here you can find a list of the various customization options you can use for the pagination component as props, as well as available slots and events.

Sass Variables

Here you can find a list of the Sass variables you can use for the pagination components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.

(
    light: $pagination-variant-light,
    dark: $pagination-variant-dark
)

@function pagination-variant($variant) {
    $pagination-variant-color: variant-color-by-luminance($variant, $pagination-color-for-light-variant, $pagination-color-for-dark-variant);
    $pagination-variant-color-disabled: variant-color-by-luminance($variant, darken-lightness($pagination-color-for-light-variant, 40%), lighten-lightness($pagination-color-for-dark-variant, 40%));
    $pagination-variant-background: $variant;
    $pagination-variant-background-hover: darken-lightness($variant, 10%);
    $pagination-variant-border-color: variant-color-by-luminance($variant, $border-color-dark, $border-color-light);

    $variant-map: (
        color: $pagination-variant-color,
        color-disabled: $pagination-variant-color-disabled,
        background: $pagination-variant-background,
        background-hover: $pagination-variant-background-hover,
        border-color: $pagination-variant-border-color
    );

    @return $variant-map;
}