How to create and style a simple Pagination Component?

How to create and style a simple Pagination Component? #frontend #dev #UI #UX #angular

Abdallah Yashir Ramsing

Dec 20, 2022 • 2 min read

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:

Layout

Styling

Sign up for more like this.