Table Of Contents
Get the extension here - https://doyinolarewaju.gumroad.com/l/wrglp
Demo - https://nc-engine-demos.framer.website/
Current Version - v0.1.3
Report bugs and Requests - https://github.com/NoCode-Engine/extensions-bug-triage/issues/new?assignees=gate3&labels=framer-cms-pagination&projects=&template=bug_report.md
The video directly below is now partially outdated. I am leaving it here to show you how to add class names from the table below to your component. Please use only the class names part and any other you find relevant.
https://www.youtube.com/watch?v=u36A_he4uPs
The documentation covers how to use the Framer Pagination Extension by NoCode Engine. The extension was made with flexibility and compatibility in mind, which means, it is configurable, easy to adapt to your design without interfering with your styling.
If you find any bugs, recommendations or suggestions, please create a new issue here.
The extension uses HTML classes to allow you use your own buttons and UI components to drive pagination. To learn how to add custom classes to a component/element in framer, visit this page. Here are the classes currently available:
| Class Name | Description | Required |
|---|---|---|
| nc-item | The class for each framer item in a collection list. The pagination item should be placed in a Parent Frame and then this class should be added to that frame. | True |
| nc-next-page | Class for the next page button or the Load more button. This is automatically hidden at the end of the pagination list | True |
| nc-prev-page | Class for the previous page button. This is only required when using the Next/Previous pagination type, its not required when using Load More, so you can decide to not create this depending on the pagination type in use. This is automatically hidden at the beginning of the pagination list. | Next/Previous ⇒ True |
| Load More ⇒ False | ||
| nc-page-number | This is assigned to a container (div or any other), that should display the current page and total number of pages in the form current-page/total-pages. In future iterations this will also be used as a numbered list to navigate through available pages among others, depending on the pagination type selected. |
False |
| nc-paginate-nav | This is a container for navigation buttons like Next and Previous. The extension performs some background work to allow pagination work properly, this is usually something really quick and should not be an issue. But there can be situations where you notice a quick flash on your website, if you do, you should add your next and previous button to a frame and give that frame this class name, the extension will automatically handle showing and hiding the content as well as your next and previous buttons. |
Note: This should be added to the extension. | False |
| nc-page-loader | This has a similar use to nc-paginate-nav . But in this case, you should add a loader to your page and assign this class to it. Make sure the extension is set to hidden by using its configuration. The extension will automatically hide the loader when its ready to display.
Note: The delay is usually a matter of milliseconds, this has just been added as a precaution. | False |
Using the extension just became much simpler. Here is how to use it:
All you need to do is: