https://github.com/fallaciousreasoning/pagify-content
A simple Typescript utility for paginating HTML content.
https://github.com/fallaciousreasoning/pagify-content
pagination paging typescript web-component
Last synced: about 2 months ago
JSON representation
A simple Typescript utility for paginating HTML content.
- Host: GitHub
- URL: https://github.com/fallaciousreasoning/pagify-content
- Owner: fallaciousreasoning
- Created: 2021-10-05T13:13:56.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-10-05T13:24:48.000Z (over 4 years ago)
- Last Synced: 2025-01-04T10:55:18.776Z (over 1 year ago)
- Topics: pagination, paging, typescript, web-component
- Language: TypeScript
- Homepage:
- Size: 10.7 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# README
Pagify is a simple web component for pagifying content. At the moment it's pretty bare bones but it does what I need it to.
## Usage
This library defines a simple web component `pagify-content` for pagifying some html. **Note:** the component will fill available space, so make sure the element it's inside has a height.
Examples available [here](https://fallaciousreasoning.github.io/pagify-content/test.html)
```html
One
Two
Three
Four
```
The component exposes the following methods, which are pretty self explanatory:
```ts
const component = document.querySelector('pagify-content');
component.nextPage(); // Goes to the next page, if available.
component.previousPage(); // Goes to the previous page, if available.
component.hasNext(); // Indicates if there is another page.
component.hasPrevious(); // Indicates if there is another page.
component.pageCount; // The number of pages available.
component.currentPage; // The current page of the component.
component.currentPage = 3; // Jump to the third page.
```
## Development
1. Install dependencies
npm install
2. Start watching the typescript files
npm run dev
3. Serve the development folder, so you can access `test.html` in a browser
npx serve .
4. Open `localhost:5000/test.html` to view the file.