How to create a Pagination screen | Ionic Design Kit

Ionic Design Kit, built on a design base of Ionic Framework components, simplifies app development by providing designers with a range of pre-made elements. Designers can effortlessly pick and place elements, eliminating the need to create components from scratch. For developers, this means no complex coding – all components are sourced from the Ionic Framework. The result is a speedy, efficient, and collaborative process, making the Ionic Design Kit essential for both designers and developers.

The Pagination Screen is an important feature in content-heavy apps such as news platforms, data dashboards, and product catalogs. It allows users to navigate large sets of content using page controls rather than infinite scroll, improving performance and user experience. A well-designed pagination interface includes clearly numbered pages, next/previous arrows, item count indicators, and loading feedback, ensuring smooth and organized navigation.

This guide will walk you through the steps to design and implement a Pagination Screen using the Ionic Design Kit. By leveraging its reusable UI components and the Ionic Framework, you can create a structured, user-friendly content navigation system that enhances clarity and control for users dealing with large data sets.

1. Install Ionic CLI with the command

Creating a project with the Ionic CLI

npm i -g @ionic/cli

2. Create a new project

To create a new project, run the following command.

ionic start pagination blank --type=react

3. Get inside the project directory

cd pagination

4. Create a Pagination page

Create page Pagination.tsx inside src/pages and add code.

import { IonPage } from '@ionic/react';

const Pagination: React.FC = () => {
  return (
    <IonPage></IonPage>
  );
};

export default Pagination;

Please make sure that you've added routing in src/App.tsx for the created page. All Ionic framework components that will be used below should be imported similarly to the IonPage component.

5. Select the layout structure

For convenience, we will be using the layout structure recommended by Ionic for all screens. This allows us to add header code and content inside the IonPage.

<IonPage>
  <IonHeader>
    <IonToolbar>
    ...
    </IonToolbar>
  </IonHeader>
  <IonContent>
  ...
  </IonContent>
</IonPage>

The header is created with IonHeader and contains IonToolbar, which is the main container for navigation elements. Inside it, IonButtons with slot="start" places a group of buttons on the left. IonBackButton is a predefined navigation button; its defaultHref="/" defines where it navigates back, text="" hides the label, and icon={arrowBack} sets the icon. IonTitle displays the page title 'Blog' in the center.

<IonHeader>
    <IonToolbar>
        <IonButtons slot="start" className="ion-padding-start">
            <IonBackButton defaultHref="/" text="" icon={arrowBack} />
        </IonButtons>
        <IonTitle>Blog</IonTitle>
    </IonToolbar>
</IonHeader>

This concludes our work with IonHeader, and the following sections will cover working with IonContent.

7. Build the content section with cards

The main area is wrapped in IonContent. Inside it, IonCard components represent blog posts. Each card includes IonImg with src for the image and alt for accessibility. IonCardHeader contains IonCardTitle for the post title and IonCardSubtitle for the author and date. IonCardContent provides the description or preview text. Multiple IonCard elements can be stacked to display a list of articles.

<IonContent>
    <IonCard>
        <IonImg src="p-card-2.jpg" alt="card-image" />
        <IonCardHeader>
            <IonCardTitle>Building your API stack</IonCardTitle>
            <IonCardSubtitle>Olivia Rhye • 20 Jan 2025</IonCardSubtitle>
        </IonCardHeader>
        <IonCardContent>
            The rise of RESTful APIs has been met by a rise in tools for
            creating, testing, and managing them.
        </IonCardContent>
    </IonCard>
    <IonCard>
        <IonImg src="p-card-1.jpg" alt="card-image" />
        <IonCardHeader>
            <IonCardTitle>What is wireframing?</IonCardTitle>
            <IonCardSubtitle>Michael Smith • 18 Jan 2025</IonCardSubtitle>
        </IonCardHeader>
        <IonCardContent>
            Introduction to Wireframing and its Principles. Learn from the best
            in the industry.
        </IonCardContent>
    </IonCard>
</IonContent>

8. Implement the footer with pagination controls

At the bottom, IonFooter holds a navigation row styled with className="ion-padding-vertical". Inside, IonItem with lines="none" creates a clean horizontal container. IonButton with slot="start" and disabled={true} displays a back button in outline style, using IonIcon with slot="icon-only" to show only the icon. IonLabel in the center shows the text 'Page 1 of 10'. Another IonButton with slot="end" places the forward button on the right, also containing an IonIcon.

<IonContent>
    ...
</IonContent>
<IonFooter className="ion-padding-vertical">
    <IonItem lines="none">
        <IonButton slot="start" size='large' disabled={true} fill="outline" color="medium">
            <IonIcon slot="icon-only" icon={arrowBack} size='large' />
        </IonButton>
        <IonLabel className="ion-text-center">Page 1 of 10</IonLabel>
        <IonButton slot="end" size='large' fill="outline" color="medium">
                <IonIcon slot="icon-only" icon={arrowForward} size='large' />
        </IonButton>
    </IonItem>
</IonFooter>

Thank you for joining us on this exciting journey thus far. Stay tuned for more guides in our comprehensive series, where we'll not only delve into various aspects of mobile app development but also showcase how the Ionic Kit can be your game-changer.

Are you prepared to elevate your Ionic experience? Explore the advantages of incorporating the Ionic Design Kit for intuitive designs and seamless development. May your coding journey be marked by continual innovation and triumphant achievements!