search

acronis / ui-component-library

The Acronis UI Component Library is a UI component library for Web applications based on Vue.js v3
https://acronis.github.io/ui-component-library/
MIT License
20 stars 11 forks source link

Pagination component #82

Open leonid opened 2 months ago

leonid commented 2 months ago

A pagination component is a user interface element that allows users to navigate through a large set of data by dividing it into discrete pages.

It typically includes controls such as next/previous buttons, page numbers, and sometimes first/last page buttons.

The primary purpose of a pagination component is to improve the user experience by making it easier to browse through large amounts of content without overwhelming the user.

Acceptance

  1. Define a Vue component named Pagination.
  2. Include props for total items, items per page, current page, total pages.
  3. Compute the total number of pages based on the total items and items per page.
  4. Implement methods to handle page navigation (next, previous, specific page).
  5. Emit event or implement model-value of current page.
  6. Render the pagination controls with appropriate event bindings.
  7. Apply styles to ensure the pagination component is visually appealing and responsive.
  8. Add demos according to mockups
  9. Test props, composition and rendered output
  10. Update documentation

Mockups

https://www.figma.com/design/6nFlVmwDwvGloglQHxyElh/Syntax-UI-3.0?node-id=592-169308

Jerd0 commented 2 months ago

number of displayed pages(5 by default) not needed.

Jerd0 commented 2 months ago

optional props for customization - what it's mean?