How to create and style a simple Pagination Component?
How to create and style a simple Pagination Component? #frontend #dev #UI #UX #angular
--
Pagination remains one of the most common UI components for data-centric apps esp. in regard to tables.
Most modern Web frameworks such as ASP.NET, Ruby on Rails and Laravel come with a pagination feature by default requiring little configuration.
Here’s how I create a simple Pagination component in Angular using SCSS.
To begin with, here’s how you can place the buttons to get an idea.
<div class="pagination"> <div> <i class="icon icons8-chevron-left"></i> </div> <button class="button">1</button> <button class="button">2</button> <button class="button">2</button> <button class="button">..</button> <button class="button">12</button> <div> <i class="icon icons8-chevron-left"></i> </div> </div>
Structure
Layout
You can use display flex or grid for the layout.
If you know the number of buttons or controls beforehand, you can use grid.
However, if they are dynamic, a better approach is to use a flex layout.
Here’s an example using a list:
<div class="pages"> <div> <i class="icon chevron-left" (click)="previous()" [class.disabled]="currentPage === 1"></i> </div> <button *ngFor="let item of list" class="p-button" [class.selected]="item === currentPage" (click)="go(item)">{{ item }}</button> <button class="p-button">...</button> <button class="p-button" [class.selected]="maxNumber === currentPage" (click)="go(maxNumber)">{{ maxNumber }}</button> <div> <i class="icon chevron-right" (click)="next()" [class.disabled]="currentPage === maxNumber"></i> </div> </div>
HTML
Styling
Styling using flex and centering the component and its corresponding items.
.pages { padding: 1.5rem 25%; display: flex; justify-content: space-between; align-items: center; align-content: center; .p-button { width: 2rem; height: 2rem; border-radius: .25rem; user-select: none; } .selected { color: #fff; background-color: orange; } .icon { color: gray; cursor: pointer; } .disabled { color: lightgray; cursor: not-allowed; } }
Style
Here’s the end result:
