AisPagination

AisPagination is a custom input component that provides a current page number input control. The value should be bound via v-model in your app. Page numbers are indexed from 1. The number of pages is computed from the provided prop values for total-rows and per-page.

Selected Page = [5]

Size

Selected Page = [5]

Align

start

center

end

fill

Selected Page = [5]

Custom Text

Selected Page = [5]

Hide Ellipsis

Selected Page = [5]

Goto First/Last Buttons

Selected Page = [5]

Slots

Selected Page = [5]

Rounded

rounded-none

rounded-sm

rounded

rounded-md

rounded-xl

rounded-2xl

rounded-3xl

rounded-full

Selected Page = [5]

<template>
  <div class="grid gap-4 text-center">
    <div class="grid grid-cols-2 gap-4">
      <div class="grid gap-4">
        <Example label="rounded-none">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         rounded="none"
          >
          </AisPagination>
        </Example>
        <Example label="rounded-sm">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         rounded="sm"
          >
          </AisPagination>
        </Example>
        <Example label="rounded">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         rounded
          >
          </AisPagination>
        </Example>
        <Example label="rounded-md">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         rounded="md"
          >
          </AisPagination>
        </Example>
      </div>
      <div class="grid gap-4">
        <Example label="rounded-xl">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         rounded="xl"
          >
          </AisPagination>
        </Example>
        <Example label="rounded-2xl">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         rounded="2xl"
          >
          </AisPagination>
        </Example>
        <Example label="rounded-3xl">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         rounded="3xl"
          >
          </AisPagination>
        </Example>
        <Example label="rounded-full">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         rounded="full"
          >
          </AisPagination>
        </Example>
      </div>
    </div>


    <div>Selected Page = [{{ page }}]</div>
  </div>
</template>

<script setup>
    import {ref} from 'vue';
    import { AisPagination } from '@ais-public/ais-components';
    import Example from "@/components/docs/ComponentExample.vue";

    const page = ref(5)
</script>

Variants

primary

secondary

default

info

success

warning

danger

primary outline

secondary outline

default outline

info outline

success outline

warning outline

danger outline

Selected Page = [5]

<template>
  <div class="flex flex-col gap-4 text-center">
    <div class="grid grid-cols-2">
      <div class="flex flex-col gap-4">
        <Example label="primary">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         variant="primary"
          >
          </AisPagination>
        </Example>
        <Example label="secondary">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         variant="secondary"
          >
          </AisPagination>
        </Example>
        <Example label="default">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         variant="default"
          >
          </AisPagination>
        </Example>
        <Example label="info">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         variant="info"
          >
          </AisPagination>
        </Example>
        <Example label="success">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         variant="success"
          >
          </AisPagination>
        </Example>
        <Example label="warning">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         variant="warning"
          >
          </AisPagination>
        </Example>
        <Example label="danger">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         variant="danger"
          >
          </AisPagination>
        </Example>
      </div>

      <div class="flex flex-col gap-4">
        <Example label="primary outline">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         variant="primary"
                         outline
          >
          </AisPagination>
        </Example>
        <Example label="secondary outline">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         variant="secondary"
                         outline
          >
          </AisPagination>
        </Example>
        <Example label="default outline">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         variant="default"
                         outline
          >
          </AisPagination>
        </Example>
        <Example label="info outline">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         variant="info"
                         outline
          >
          </AisPagination>
        </Example>
        <Example label="success outline">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         variant="success"
                         outline
          >
          </AisPagination>
        </Example>
        <Example label="warning outline">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         variant="warning"
                         outline
          >
          </AisPagination>
        </Example>
        <Example label="danger outline">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         variant="danger"
                         outline
          >
          </AisPagination>
        </Example>
      </div>

    </div>

    <div>Selected Page = [{{ page }}]</div>
  </div>
</template>

<script setup>
    import {ref} from 'vue';
    import { AisPagination } from '@ais-public/ais-components';
    import Example from "@/components/docs/ComponentExample.vue"

    const page = ref(5)
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155

Component Reference

Props

Property 1	Type(s)	Description	Default
align	`String`	Alignment of the pagination buttons Valid values: start, left, center, end, right, fill	`'center'`
ariaControls	`String`	ID of the element or component that this controls. Value is placed in the `aria-controls` attribute	`''`
ariaLabel	`String`	Value to place in the `aria-label` attribute of the pagination control	`'Pagination'`
disabled	`Boolean`	When set to `true`, disables the component's functionality and places it in a disabled state	`false`
ellipsisClass	`Array`, `Object`, `String`	Class(es) to apply to the 'ellipsis' placeholders	`''`
ellipsisText	`String`	Content to place in the ellipsis placeholder	`undefined`
firstClass	`Array`, `Object`, `String`	Class(es) to apply to the 'Go to first page' button	`null`
firstNumber	`Boolean`	Display first page number instead of Goto First button	`false`
firstText	`String`	Content to place in the goto first page button	`undefined`
hideEllipsis	`Boolean`	Do not show ellipsis buttons	`false`
hideGotoEndButtons	`Boolean`	Hides the goto first and goto last page buttons	`false`
labelFirstPage	`String`	Value to place in the `aria-label` attribute of the goto first page button	`'Go to first page'`
labelLastPage	`String`	Value to place in the `aria-label` attribute of the goto last page button	`'Go to last page'`
labelNextPage	`String`	Value to place in the `aria-label` attribute of the goto next page button	`'Go to next page'`
labelPage	`Func`, `String`	Value to place in the `aria-label` attribute of the goto page button. Page number will be appended automatically	`'Go to page'`
labelPrevPage	`String`	Value to place in the `aria-label` attribute of the goto previous page button	`'Go to previous page'`
lastClass	`Array`, `Object`, `String`	Class(es) to apply to the 'Go to last page' button	`''`
lastNumber	`Boolean`	Display last page number instead of 'Goto Last' button	`false`
lastText	`String`	Content to place in the goto last page button	`undefined`
limit	`Number`, `String`	Maximum number of buttons to show (including ellipsis if shown, but excluding the bookend buttons)	`5`
modelValue	`Number`	The current page number	`1`
nextClass	`Array`, `Object`, `String`	Class(es) to apply to the 'Go to next page' button	`''`
nextText	`String`	Content to place in the goto next page button	`undefined`
outline	`Boolean`	Applies one of the theme color variants to the border instead of the background. This replaces the deprecated `alternate` prop	`false`
pageClass	`Array`, `Object`, `String`	Class(es) to apply to the 'Go to page #' buttons	`''`
perPage	`Number`, `String`	Number of rows per page	`10`
pills	`Boolean`	Applies pill styling to the pagination buttons	`false`
prevClass	`Array`, `Object`, `String`	Class(es) to apply to the 'Go to previous page' button	`null`
prevText	`String`	Content to place in the goto previous page button	`undefined`
rounded	`Boolean`, `String`	Applies rounded corners using TailwindCSS's rounded classes	`undefined`
size	`String`	Size of the rendered buttons Valid values: xs, sm, md, lg, xl	`'sm'`
totalRows	`Number`, `String`	Total number of rows in the dataset	`0`
variant	`String`	Applies one of the theme color variants to the component.	`'default'`

Slots

Name 1	Scoped	Description
ellipsis-text	No	The '...' indicator content
first-text	No	The "go to first page" button content
last-text	No	The "go to last page" button content
next-text	No	The "go to next page" button content
prev-text	No	The "go to previous page" button content

Events

Event 1	Arguments	Description
change	page `number` - The current page	Emitted when the page changes
input	page `number` - The current page	Emitted when the page changes
update:modelValue	page `number` - The current page	Emitted when the page changes

AisNavBar

AisPopover

AisPagination #

Size #

Align #

Custom Text #

Hide Ellipsis #

Goto First/Last Buttons #

Slots #

Rounded #

Variants #

Component Reference #

Props #

Slots #

Events #

AisPagination

Size

Align

Custom Text

Hide Ellipsis

Goto First/Last Buttons

Slots

Rounded

Variants

Component Reference

Props

Slots

Events