Skip to content

Commit a914a13

Browse files
andreyjamerandreyjamer
committed
Added a better slots example for pagination component documentation
1 parent a67361d commit a914a13

File tree

3 files changed

+158
-0
lines changed

3 files changed

+158
-0
lines changed

‎docs/components/pagination.md‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import FwbPaginationExampleIcons from './pagination/examples/FwbPaginationExampl
44
import FwbPaginationExampleNavigation from './pagination/examples/FwbPaginationExampleNavigation.vue';
55
import FwbPaginationExampleNavigationIcons from './pagination/examples/FwbPaginationExampleNavigationIcons.vue';
66
import FwbPaginationExampleSlots from './pagination/examples/FwbPaginationExampleSlots.vue';
7+
import FwbPaginationExampleSlotsAdvanced from './pagination/examples/FwbPaginationExampleSlotsAdvanced.vue';
78
import FwbPaginationExampleTable from './pagination/examples/FwbPaginationExampleTable.vue';
89
import FwbPaginationExampleCustomLength from './pagination/examples/FwbPaginationExampleCustomLength.vue';
910
import FwbPaginationExampleCustomLabels from './pagination/examples/FwbPaginationExampleCustomLabels.vue';
@@ -268,6 +269,84 @@ const currentPage = ref(1)
268269
</script>
269270
```
270271

272+
## Advanced slots example
273+
274+
<fwb-pagination-example-slots-advanced />
275+
276+
```vue
277+
<template>
278+
<fwb-pagination
279+
v-model="currentPage"
280+
:total-items="100"
281+
enable-first-last
282+
>
283+
<template #first-button="{ disabled, setPage }">
284+
<button
285+
class="disabled:cursor-not-allowed 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"
286+
:disabled="disabled"
287+
@click="setPage()"
288+
>
289+
First page
290+
</button>
291+
</template>
292+
293+
<template #last-button="{ disabled, setPage, page }">
294+
<button
295+
class="disabled:cursor-not-allowed 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"
296+
:disabled="disabled"
297+
@click="setPage()"
298+
>
299+
Last page ({{ page }})
300+
</button>
301+
</template>
302+
303+
<template #prev-button="{ disabled, decreasePage }">
304+
<button
305+
class="disabled:cursor-not-allowed 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"
306+
:disabled="disabled"
307+
@click="decreasePage()"
308+
>
309+
Prev page
310+
</button>
311+
</template>
312+
313+
<template #next-button="{ disabled, increasePage }">
314+
<button
315+
class="disabled:cursor-not-allowed 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"
316+
:disabled="disabled"
317+
@click="increasePage()"
318+
>
319+
Next page
320+
</button>
321+
</template>
322+
323+
<template #page-button="{ disabled, page, setPage }">
324+
<button
325+
class="disabled:cursor-not-allowed ml-0 flex h-8 items-center justify-center border border-purple-300 px-3 leading-tight text-gray-500 first:rounded-l-lg last:rounded-r-lg 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"
326+
:class="{
327+
'bg-purple-200 hover:bg-purple-300': !disabled,
328+
'bg-purple-300': disabled
329+
}"
330+
:disabled="disabled"
331+
@click="setPage(page)"
332+
>
333+
{{ page }}
334+
</button>
335+
</template>
336+
</fwb-pagination>
337+
Current page: {{ currentPage }}
338+
</template>
339+
340+
<script lang="ts" setup>
341+
import { ref } from 'vue'
342+
343+
import { FwbPagination } from '../../../../src/index'
344+
345+
const currentPage = ref<number>(1)
346+
</script>
347+
348+
```
349+
271350
## API
272351

273352
### Props

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,20 @@
44
v-model="currentPage"
55
:total-items="100"
66
hide-labels
7+
enable-first-last
78
>
9+
<template #first-icon>
10+
⏪
11+
</template>
812
<template #prev-icon>
913
⬅️
1014
</template>
1115
<template #next-icon>
1216
➡️
1317
</template>
18+
<template #last-icon>
19+
⏩
20+
</template>
1421
<template #page-button="{ page, setPage }">
1522
<button
1623
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"

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

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<template>
2+
<div class="vp-raw flex flex-col items-center mb-2">
3+
<fwb-pagination
4+
v-model="currentPage"
5+
:total-items="100"
6+
enable-first-last
7+
>
8+
<template #first-button="{ disabled, setPage }">
9+
<button
10+
class="disabled:cursor-not-allowed 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"
11+
:disabled="disabled"
12+
@click="setPage()"
13+
>
14+
First page
15+
</button>
16+
</template>
17+
18+
<template #last-button="{disabled, setPage, page }">
19+
<button
20+
class="disabled:cursor-not-allowed 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"
21+
:disabled="disabled"
22+
@click="setPage()"
23+
>
24+
Last page ({{ page }})
25+
</button>
26+
</template>
27+
28+
<template #prev-button="{disabled, decreasePage }">
29+
<button
30+
class="disabled:cursor-not-allowed 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"
31+
:disabled="disabled"
32+
@click="decreasePage()"
33+
>
34+
Prev page
35+
</button>
36+
</template>
37+
38+
<template #next-button="{disabled, increasePage }">
39+
<button
40+
class="disabled:cursor-not-allowed 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"
41+
:disabled="disabled"
42+
@click="increasePage()"
43+
>
44+
Next page
45+
</button>
46+
</template>
47+
48+
<template #page-button="{ disabled, page, setPage }">
49+
<button
50+
class="disabled:cursor-not-allowed ml-0 flex h-8 items-center justify-center border border-purple-300 px-3 leading-tight text-gray-500 first:rounded-l-lg last:rounded-r-lg 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"
51+
:class="{
52+
'bg-purple-200 hover:bg-purple-300': !disabled,
53+
'bg-purple-300': disabled
54+
}"
55+
:disabled="disabled"
56+
@click="setPage(page)"
57+
>
58+
{{ page }}
59+
</button>
60+
</template>
61+
</fwb-pagination>
62+
Current page: {{ currentPage }}
63+
</div>
64+
</template>
65+
66+
<script lang="ts" setup>
67+
import { ref } from 'vue'
68+
69+
import { FwbPagination } from '../../../../src/index'
70+
71+
const currentPage = ref<number>(1)
72+
</script>

0 commit comments

Comments
 (0)