Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/freinet12/vue3-paginate
A pagination component for Vue3 + TailwindCSS. This component is published as an npm package
https://github.com/freinet12/vue3-paginate
pagination pagination-components tailwindcss vue
Last synced: about 20 hours ago
JSON representation
A pagination component for Vue3 + TailwindCSS. This component is published as an npm package
- Host: GitHub
- URL: https://github.com/freinet12/vue3-paginate
- Owner: freinet12
- License: mit
- Created: 2022-05-08T18:10:25.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-05-16T02:14:57.000Z (over 2 years ago)
- Last Synced: 2024-04-25T16:03:22.583Z (5 months ago)
- Topics: pagination, pagination-components, tailwindcss, vue
- Language: Vue
- Homepage:
- Size: 279 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Vue3 Paginate is a very simple Pagination component for Vue 3 and TailwindCSS.
## ⚙️ Installation
Make sure you have Vue 3 and TailwindCSS v2 or v3 installed in your project.
Install the component by running the command below:
```bash
npm i -S @brutforce/vue3-paginate
```
Register the components locally
```ts
import { Paginate, NavButton } from '@brutforce/vue3-paginate'
```
### Example
```vue
Prev
Next
import { defineComponent } from 'vue'
import { Paginate, NavButton } from '@brutforce/vue3-paginate'
export default defineComponent({
name: 'App',
components: {
Paginate,
NavButton
},
methods: {
paginate(page: number): void{
console.log(page)
}
}
});
```
## Components
### Paginate
The Paginate component is the main component whic handles all of the pagination logic
#### Props
Here is a list of all the props for the Paginate component.
|Name | Type | Required | Description
------ | ----- | ----- | ----- |
| maxPages | Number | false | The maximum number of pages to display at once.
Default: 3 |
| perPage | Number | false | The number of items displayed per page.
Default: 5 |
| totalPages | Number | false | The total number of pages to paginate.
Default: 10 |
| currentPage | Number | false | The current page.
Default: 1 |
| showFirstLast | Boolean | false | Specifies is the 'First' and 'Last' buttons should be displayed.
Default: true |
| wrapperClasses | String | false | A string of Tailwind classes for styling the component's main wrapper element.
Default: `'shadow-md border-1 rounded-lg'` |
| dotClasses | String | false | A string of Tailwind classes for styling the dots ("...") before and after the allowed maxPages range.
Default: `px-3 py-auto cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400'`|
| activePageClasses | String | false | A string of Tailwind classes for styling the active page button.
Default: `'bg-indigo-500 hover:bg-indigo-600 text-white'` |
| pageClasses | String | false | A string of Tailwind classes for styling the page number buttons.
Default: `'px-2 sm:px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 hover:bg-gray-100'` |
#### Named Slots
The following slots are used for the navigation buttons (First, Previous, Next, Last).
The slots allow you to add a fully customized NavButton component. See the example above.
`first, prev, next, last`
#### Events
The Paginate component emits the following event(s).
| Name | Description
----- | ----- |
|input | This `input` event is fired every time a button on the paginator is clicked. The current page is sent with the event. Simply provide a method to catch the input event. See the example above.
### NavButton
The NavButton component is used to navigate through the pages by clicking 'First', 'Prev', 'Next', and 'Last'
#### Props
Here is a list of props for the NavButton component.
|Name | Type | Required | Description
----- | ----- | ----- | ----- |
|text | String | false | The text that should be displayed on the button. Alternatively, you can supply your own html instead using slots. See the 'Prev' and 'Next' NavButtons in the exmple above. |
| page | String or Number | true | The page name/number to be displayed. ie `first`, `prev`, `next`, `last` |
| isFirst | Boolean | false | Used to determine if the 'First' button should be disabled.
Default: false . This is calculated internally by default |
| isPrev | Boolean | false | Used to determine if the 'Prev' button should be disabled.
Default: false . This is calculated internally by default |
| isNext | Boolean | false | Used to determin if the 'Next' button should be disabled.
Default: false . This is calculated internally by default |
| isLast | Boolean | false | Used to determin if the 'Last' button should be disabled.
Default: false . This is calculated internally by default |