feat: added icons and custom text

This commit is contained in:
victor
2022-12-23 17:03:26 +04:00
parent e3ac782c1b
commit 64d629133c
4 changed files with 53 additions and 3 deletions

View File

@@ -2,6 +2,8 @@
import PaginationExample from './pagination/examples/PaginationExample.vue';
import PaginationNavigationExample from './pagination/examples/PaginationNavigationExample.vue';
import PaginationTableExample from './pagination/examples/PaginationTableExample.vue';
import PaginationWithIconsExample from './pagination/examples/PaginationWithIconsExample.vue';
import PaginationWithCustomTextExample from './pagination/examples/PaginationWithCustomTextExample.vue';
</script>
# Vue Pagination Component - Flowbite
@@ -42,4 +44,28 @@ import { Pagination } from 'flowbite-vue'
</template>
```
<PaginationTableExample />
<PaginationWithIconsExample />
## Pagination with icons
```vue
<script setup>
import { Pagination } from 'flowbite-vue'
</script>
<template>
<Pagination></Pagination>
</template>
```
<PaginationWithCustomTextExample />
## Pagination with custom labels
```vue
<script setup>
import { Pagination } from 'flowbite-vue'
</script>
<template>
<Pagination></Pagination>
</template>
```

View File

@@ -0,0 +1,11 @@
<template>
<div class="vp-raw flex flex-col">
<Pagination v-model="currentPage" :total-pages="100" previous-label="<<<" next-label=">>>"></Pagination>
</div>
</template>
<script lang="ts" setup>
import { Pagination } from '../../../../src/index'
import { ref } from 'vue'
const currentPage = ref<number>(1)
</script>

View File

@@ -0,0 +1,11 @@
<template>
<div class="vp-raw flex flex-col">
<Pagination v-model="currentPage" :total-pages="100" show-icons></Pagination>
</div>
</template>
<script lang="ts" setup>
import { Pagination } from '../../../../src/index'
import { ref } from 'vue'
const currentPage = ref<number>(1)
</script>