Skip to content

Commit 5bdcbf0

Browse files
SqrczSqrcz
committed
pagination documentation updated
1 parent d037485 commit 5bdcbf0

10 files changed

+229
-192
lines changed

‎docs/components/pagination.md

Lines changed: 167 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,193 +1,273 @@
11
<script setup>
2-
import PaginationExample from './pagination/examples/FwbPaginationExample.vue';
3-
import PaginationNavigationExample from './pagination/examples/FwbPaginationExampleNavigation.vue';
4-
import PaginationTableExample from './pagination/examples/FwbPaginationExampleTable.vue';
5-
import PaginationWithIconsExample from './pagination/examples/FwbPaginationExampleWithIcons.vue';
6-
import PaginationWithCustomTextExample from './pagination/examples/FwbPaginationExampleWithCustomText.vue';
7-
import PaginationWithCustomSlice from './pagination/examples/FwbPaginationExampleWithCustomSlice.vue';
8-
import PaginationSlotsExample from './pagination/examples/FwbPaginationExampleSlots.vue';
2+
import FwbPaginationExample from './pagination/examples/FwbPaginationExample.vue';
3+
import FwbPaginationExampleIcons from './pagination/examples/FwbPaginationExampleIcons.vue';
4+
import FwbPaginationExampleNavigation from './pagination/examples/FwbPaginationExampleNavigation.vue';
5+
import FwbPaginationExampleNavigationIcons from './pagination/examples/FwbPaginationExampleNavigationIcons.vue';
6+
import FwbPaginationExampleSlots from './pagination/examples/FwbPaginationExampleSlots.vue';
7+
import FwbPaginationExampleTable from './pagination/examples/FwbPaginationExampleTable.vue';
8+
import FwbPaginationExampleCustomLength from './pagination/examples/FwbPaginationExampleCustomLength.vue';
9+
import FwbPaginationExampleCustomLabels from './pagination/examples/FwbPaginationExampleCustomLabels.vue';
910
</script>
11+
1012
# Vue Pagination - Flowbite
11-
#### Use the Tailwind CSS pagination element to indicate a series of content across various pages based on multiple styles and sizes
13+
#### Use the Tailwind CSS pagination element to indicate a series of content across various pages based on multiple styles and sizes.
1214
The pagination component can be used to navigate across a series of content and data sets for various pages such as blog posts, products, and more. You can use multiple variants of this component with or without icons and even for paginating table data entries.
1315

1416
## Default pagination
1517
Use the following list of pagination items based on two sizes powered by Tailwind CSS utility classes to indicate a series of content for your website.
1618

17-
<PaginationExample />
19+
<fwb-pagination-example />
1820

1921
```vue
22+
<template>
23+
<fwb-pagination
24+
v-model="currentPage"
25+
:total-items="100"
26+
/>
27+
<fwb-pagination
28+
v-model="currentPage"
29+
:total-items="100"
30+
large
31+
/>
32+
</template>
33+
2034
<script setup>
2135
import { FwbPagination } from 'flowbite-vue'
2236
import { ref } from 'vue'
2337
2438
const currentPage = ref(1)
2539
</script>
26-
<template>
27-
<fwb-pagination v-model="currentPage" :total-items="100"></fwb-pagination>
28-
<fwb-pagination v-model="currentPage" :total-items="100" large></fwb-pagination>
29-
</template>
3040
```
3141

3242
## Pagination with icons
3343
The following pagination component example shows how you can use SVG icons instead of text to show the previous and next pages.
3444

35-
<PaginationWithIconsExample />
45+
<fwb-pagination-example-icons />
3646

3747
```vue
48+
<template>
49+
<fwb-pagination
50+
v-model="currentPage"
51+
:total-pages="100"
52+
hide-labels
53+
show-icons
54+
/>
55+
<fwb-pagination
56+
v-model="currentPage"
57+
:total-pages="100"
58+
hide-labels
59+
show-icons
60+
large
61+
/>
62+
</template>
63+
3864
<script setup>
3965
import { FwbPagination } from 'flowbite-vue'
4066
import { ref } from 'vue'
4167
4268
const currentPage = ref(1)
4369
</script>
44-
<template>
45-
<fwb-pagination v-model="currentPage" :total-pages="100" show-icons></fwb-pagination>
46-
</template>
4770
```
4871

72+
## Custom length pagination
73+
You can use your own pages count in the row by passing props: `slice-length`
74+
This prop means left side and right side pages row slicing. In the example it has value `4`. So row length will be `4 + 1 + 4 = 9` pages.
4975

76+
<fwb-pagination-example-custom-length />
77+
```vue
78+
<template>
79+
<fwb-pagination
80+
v-model="currentPage"
81+
:slice-length="4"
82+
:total-pages="100"
83+
/>
84+
</template>
5085
86+
<script setup>
87+
import { FwbPagination } from 'flowbite-vue'
88+
import { ref } from 'vue'
5189
90+
const currentPage = ref(5)
91+
</script>
92+
```
5293

94+
## Previous and next
5395

54-
## Default with custom length
55-
You can use your own pages count in the row by passing props: `slice-length`
56-
This prop means left side and right side pages row slicing. In the example it has value `4`. So row length will be 4 + 1 + 4 pages - 9 pages.
57-
96+
<fwb-pagination-example-navigation />
5897
```vue
98+
<template>
99+
<fwb-pagination
100+
v-model="currentPage"
101+
:layout="'navigation'"
102+
:total-pages="100"
103+
/>
104+
<fwb-pagination
105+
v-model="currentPage"
106+
:layout="'navigation'"
107+
:total-pages="100"
108+
large
109+
/>
110+
</template>
111+
59112
<script setup>
60113
import { FwbPagination } from 'flowbite-vue'
61114
import { ref } from 'vue'
62115
63116
const currentPage = ref(1)
64117
</script>
65-
<template>
66-
<fwb-pagination v-model="currentPage" :total-pages="100" :slice-length="4"></fwb-pagination>
67-
</template>
68118
```
69119

70-
<PaginationWithCustomSlice />
71-
72-
## Previous and next
120+
## Previous and next with icons
73121

122+
<fwb-pagination-example-navigation-icons />
74123
```vue
124+
<template>
125+
<fwb-pagination
126+
v-model="currentPage"
127+
:layout="'navigation'"
128+
:total-pages="100"
129+
show-icons
130+
/>
131+
<fwb-pagination
132+
v-model="currentPage"
133+
:layout="'navigation'"
134+
:total-pages="100"
135+
show-icons
136+
large
137+
/>
138+
</template>
139+
75140
<script setup>
76141
import { FwbPagination } from 'flowbite-vue'
77142
import { ref } from 'vue'
78143
79144
const currentPage = ref(1)
80145
</script>
81-
<template>
82-
<div class="flex items-center justify-center text-center">
83-
<fwb-pagination v-model="currentPage" :total-pages="10" :layout="'navigation'"></fwb-pagination>
84-
</div>
85-
</template>
86146
```
87147

88-
<PaginationNavigationExample />
89-
90-
## Pagination with table layout
148+
## Table data pagination
149+
You can use the following markup to show the number of data shown inside a table element and also the previous and next action buttons.
91150
To use that layout you have to pass required props:
92151
- `per-page`: it's items count displayed on each page.
93152
- `total-items`: it's the total items count.
94153

95-
And there you don't need to use `total-pages` prop.
154+
_And here you don't need to use `total-pages` prop._
96155

156+
<fwb-pagination-example-table />
97157
```vue
158+
<template>
159+
<fwb-pagination
160+
v-model="currentPageA"
161+
:layout="'table'"
162+
:per-page="20"
163+
:total-items="100"
164+
/>
165+
<fwb-pagination
166+
v-model="currentPageB"
167+
:layout="'table'"
168+
:per-page="100"
169+
:total-items="550"
170+
large
171+
/>
172+
</template>
173+
98174
<script setup>
99175
import { FwbPagination } from 'flowbite-vue'
100176
import { ref } from 'vue'
101177
102-
const currentPage = ref(1)
178+
const currentPageA = ref(1)
179+
const currentPageB = ref(1)
103180
</script>
104-
<template>
105-
<div class="flex items-center justify-center text-center">
106-
<fwb-pagination v-model="currentPage" :layout="'table'" :per-page="20" :total-items="998" class="mb-2" />
107-
<fwb-pagination v-model="currentPage" :layout="'table'" :per-page="20" :total-items="998" large />
108-
</div>
109-
</template>
110181
```
111182

112-
<PaginationTableExample />
113183

114184
## Pagination with custom labels
115185

186+
<fwb-pagination-example-custom-labels />
116187
```vue
188+
<template>
189+
<fwb-pagination
190+
v-model="currentPage"
191+
:total-pages="100"
192+
previous-label="<<<"
193+
next-label=">>>"
194+
/>
195+
</template>
196+
117197
<script setup>
118198
import { FwbPagination } from 'flowbite-vue'
119199
import { ref } from 'vue'
120200
121201
const currentPage = ref(1)
122202
</script>
123-
<template>
124-
<fwb-pagination v-model="currentPage" :total-pages="100" previous-label="<<<" next-label=">>>"></fwb-pagination>
125-
</template>
126203
```
127-
<PaginationWithCustomTextExample />
128204

129205

130206
## Slots example
131207

132-
<PaginationSlotsExample />
208+
<fwb-pagination-example-slots />
133209

134210
```vue
135-
<script setup>
136-
import { FwbPagination } from 'flowbite-vue'
137-
import { ref } from 'vue'
138-
139-
const currentPage = ref(1)
140-
</script>
141211
<template>
142-
<fwb-pagination v-model="currentPage" :total-items="100" :show-labels="false">
212+
<fwb-pagination
213+
v-model="currentPage"
214+
:total-items="100"
215+
hide-labels
216+
>
143217
<template #prev-icon>⬅️</template>
144218
<template #next-icon>➡️</template>
145-
<template v-slot:page-button="{ page, setPage }">
146-
<button
147-
@click="setPage(page)"
148-
class="flex items-center justify-center first:rounded-l-lg last:rounded-r-lg px-3 h-8 ml-0 leading-tight text-gray-500 bg-purple-200 border border-purple-300 hover:bg-purple-300 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
149-
>
219+
<template #page-button="{ page, setPage }">
220+
<button @click="setPage(page)" class="ml-0 flex h-8 items-center justify-center border border-purple-300 bg-purple-200 px-3 leading-tight text-gray-500 first:rounded-l-lg last:rounded-r-lg hover:bg-purple-300 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
150221
{{ page }}
151222
</button>
152223
</template>
153224
</fwb-pagination>
154225
Current page: {{ currentPage }}
155226
</template>
227+
228+
<script setup>
229+
import { FwbPagination } from 'flowbite-vue'
230+
import { ref } from 'vue'
231+
232+
const currentPage = ref(1)
233+
</script>
156234
```
157235

158236
## API
159237

160238
### Props
161-
| Name | Values | Default |
162-
|---------------------------|-------------------------------------|--------------|
163-
| modelValue | `number` | `1` |
164-
| totalPages | `number` | `10` |
165-
| perPage | `number` | `10` |
166-
| totalItems | `number` | `10` |
167-
| layout | `pagination`, `table`, `navigation` | `pagination` |
168-
| showIcons | `boolean` | `false` |
169-
| sliceLength | `number` | `2` |
170-
| previousLabel | `string` | `Previous` |
171-
| nextLabel | `string` | `Next` |
172-
| enableFirstAndLastButtons | `boolean` | `false` |
173-
| showLabels | `boolean` | `true` |
174-
| large | `boolean` | `false` |
239+
| Name | Values | Default |
240+
| --------------- | ----------------------------------- | ------------ |
241+
| modelValue | `number` | `1` |
242+
| totalPages | `number` | `10` |
243+
| perPage | `number` | `10` |
244+
| totalItems | `number` | `10` |
245+
| layout | `pagination`, `table`, `navigation` | `pagination` |
246+
| showIcons | `boolean` | `false` |
247+
| sliceLength | `number` | `2` |
248+
| previousLabel | `string` | `Previous` |
249+
| nextLabel | `string` | `Next` |
250+
| enableFirstLast | `boolean` | `false` |
251+
| hideLabels | `boolean` | `false` |
252+
| large | `boolean` | `false` |
175253

176254
### Events
177255
| Name | Description |
178-
|----------------------|----------------------|
256+
| -------------------- | -------------------- |
179257
| `update:model-value` | Current page changed |
180258
| `page-changed` | Current page changed |
181259

182260
### Slots
183-
| Name | Description |
184-
|--------------|-------------------------|
185-
| start | content before buttons |
186-
| end | content after buttons |
187-
| first-button | first button content |
188-
| last-button | last button content |
189-
| prev-button | previous button content |
190-
| next-button | next button content |
191-
| prev-icon | previous icon slot |
192-
| next-icon | next icon slot |
193-
| page-button | page button slot |
261+
| Name | Description |
262+
| -------------- | ----------------------- |
263+
| `start` | content before buttons |
264+
| `first-icon` | first icon content |
265+
| `first-button` | first button content |
266+
| `prev-icon` | previous icon content |
267+
| `prev-button` | previous button content |
268+
| `page-button` | page button content |
269+
| `next-button` | next button content |
270+
| `next-icon` | next icon content |
271+
| `last-button` | last button content |
272+
| `last-icon` | last icon content |
273+
| `end` | content after buttons |

‎docs/components/pagination/examples/FwbPaginationExample.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
<template>
2-
<div class="vp-raw flex flex-col items-center">
2+
<div class="vp-raw flex flex-col items-center gap-4">
33
<fwb-pagination
44
v-model="currentPage"
55
:total-items="100"
6-
class="mb-2"
76
/>
87
<fwb-pagination
98
v-model="currentPage"

‎docs/components/pagination/examples/FwbPaginationExampleWithCustomText.vue renamed to ‎docs/components/pagination/examples/FwbPaginationExampleCustomLabels.vue

File renamed without changes.

‎docs/components/pagination/examples/FwbPaginationExampleWithCustomSlice.vue renamed to ‎docs/components/pagination/examples/FwbPaginationExampleCustomLength.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,5 @@ import { ref } from 'vue'
1313
1414
import { FwbPagination } from '../../../../src/index'
1515
16-
const currentPage = ref<number>(1)
16+
const currentPage = ref<number>(5)
1717
</script>

0 commit comments

Comments
 (0)