pagination.vue
3.71 KB
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
156
157
<script setup>
import * as demoCode from '@/views/demos/components/pagination/demoCodePagination'
</script>
<template>
<VRow class="match-height">
<VCol
cols="12"
md="6"
>
<!-- 👉 Basic -->
<AppCardCode
title="Basic"
:code="demoCode.basic"
>
<p>The <code>v-pagination</code> component is used to separate long sets of data.</p>
<DemoPaginationBasic />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 outline basic variant -->
<AppCardCode
title="Outline"
:code="demoCode.outline"
>
<p>The <code>variant='outline'</code> prop is used to give outline to pagination item.</p>
<DemoPaginationOutline />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Circle -->
<AppCardCode
title="Circle"
:code="demoCode.circle"
>
<p>The <code>rounded</code> prop allows you to render pagination buttons with alternative styles.</p>
<DemoPaginationCircle />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 outline circle variant -->
<AppCardCode
title="Outline Circle"
:code="demoCode.outlineCircle"
>
<p>The <code>variant='outline'</code> and <code>rounded</code> prop is used to give rounded outline to pagination item.</p>
<DemoPaginationOutlineCircle />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Disabled -->
<AppCardCode
title="Disabled"
:code="demoCode.disabled"
>
<p>Pagination items can be manually deactivated using the <code>disabled</code> prop.</p>
<DemoPaginationDisabled />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Icons -->
<AppCardCode
title="Icons"
:code="demoCode.icons"
>
<p>Previous and next page icons can be customized with the <code>prev-icon</code> and <code>next-icon</code> props.</p>
<DemoPaginationIcons />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Length -->
<AppCardCode
title="Length"
:code="demoCode.length"
>
<p>Using the <code>length</code> prop you can set the length of <code>v-pagination</code>, if the number of page buttons exceeds the parent container, it will truncate the list.</p>
<DemoPaginationLength />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Total visible -->
<AppCardCode
title="Total visible"
:code="demoCode.totalVisible"
>
<p>You can also manually set the maximum number of visible page buttons with the <code>total-visible</code> prop.</p>
<DemoPaginationTotalVisible />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Color -->
<AppCardCode
title="Color"
:code="demoCode.color"
>
<p>Use <code>color</code> prop for create different color pagination.</p>
<DemoPaginationColor />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Size -->
<AppCardCode
title="Size"
:code="demoCode.size"
>
<p>Use <code>size</code> prop to sets the height and width of the component. Default unit is px. Can also use the following predefined sizes: <strong>x-small</strong>, <strong>small</strong>, <strong>default</strong>, <strong>large</strong>, and <strong>x-large</strong>.</p>
<DemoPaginationSize />
</AppCardCode>
</VCol>
</VRow>
</template>