Looking for Ionic kit for you platform?
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.
An Activity History Screen is crucial for apps that track user actions, such as fitness, e-commerce, or financial applications. This screen provides users with a chronological view of their past activities, helping them monitor progress, review previous interactions, and gain insights into their behavior. A well-designed Activity History Screen enhances user experience by offering clear, easy-to-read data, fostering engagement and providing valuable context for decision-making.
This guide will walk you through designing and implementing an Activity History Screen using the Ionic Design Kit. By utilizing the design elements provided by the Ionic Framework, you can create an intuitive, responsive interface that allows users to seamlessly access and review their past activities.
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 activity blank --type=react
3. Get inside the project directory
cd activity
4. Create a Tab bar component
Use this instruction to create a Tab bar component.
5. Create an Activity page
Create page Activity.tsx inside src/pages and add code.
import { IonPage } from '@ionic/react';
const Activity: React.FC = () => {
return (
<IonPage></IonPage>
);
};
export default Activity;
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.
6. 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>
7. Place the Back button component
Inside the IonToolbar component, add an IonButtons component with the slot set to start, positioning the button at the beginning of the toolbar. Also, add className='ion-padding-start' to provide padding at the start.
Within the IonButtons component, include an IonBackButton component with the properties defaultHref='#' and text=''. This creates a back button that navigates back in the app's history when clicked. To customize the default icon, set the icon property to {arrowBack}. Ensure that {arrowBack} has been imported correctly from Ionic icons.
import { arrowBack } from "ionicons/icons";
...
<IonHeader>
<IonToolbar>
<IonButtons slot='start' className='ion-padding-start'>
<IonBackButton text='' defaultHref='#' icon={arrowBack} />
</IonButtons>
</IonToolbar>
</IonHeader>
8. Put the title on top of the page
Place the IonTitle with the text 'My activity history' to add a title for this page.
<IonHeader>
<IonToolbar>
<IonButtons slot='start' className='ion-padding-start'>
<IonBackButton text='' defaultHref='#' icon={arrowBack} />
</IonButtons>
<IonTitle>My activity history</IonTitle>
</IonToolbar>
</IonHeader>
This concludes our work with IonHeader, and the following sections will cover working with IonContent.
9. Organize the list of items
Within the IonContent section with lines to none, place the IonList .
<IonContent>
<IonList lines='none'>
</IonList>
</IonContent>
10. Add a header
To create a list with a header using the IonList component and include an IonListHeader inside it. Inside IonListHeader, use an <h1> or similar heading element to add a title, such as '2024'. This structure is ideal for categorizing or organizing content in a visually distinct way within your Ionic application.
<IonContent>
<IonList lines='none'>
<IonListHeader>
<h1>2024</h1>
</IonListHeader>
</IonList>
</IonContent>
11. Create a grouped item with a divider
To create a grouped item with a divider in Ionic, use the IonItemGroup component to organize related content and add an IonItemDivider for visual separation. Inside the IonItemDivider, include a <p> element or similar tag to display the divider's label, such as 'March 23'. This approach helps structure and categorize content effectively, making it visually clear and user-friendly.
<IonContent>
<IonList lines='none'>
<IonListHeader>
<h1>2024</h1>
</IonListHeader>
<IonItemGroup>
<IonItemDivider>
<p>March 23</p>
</IonItemDivider>
</IonItemGroup>
</IonList>
</IonContent>
12. Add an item
To create a list item use the IonItem component for structure. Add an IonThumbnail with the slot="start" attribute to include an image, such as 'a-1.jpg'. Use IonLabel to structure the text, including a <h2> for the title, like 'Rest and comfort: how to recover and be less tired', and a <p> tag for details such as 'Podcast · 31 min'. Finally, include an IonIcon with the slot="end" attribute and the chevronForward icon to indicate navigation. This layout provides a clean, interactive design for presenting activity information.
<IonContent>
<IonList lines='none'>
<IonItemGroup>
...
<IonItem>
<IonThumbnail slot='start'>
<img src='a-1.jpg' alt='image' />
</IonThumbnail>
<IonLabel>
<h2>Rest and comfort: how to recover and be less tired</h2>
<p>Podcast · 31 min</p>
</IonLabel>
<IonIcon slot='end' icon={chevronForward} />
</IonItem>
</IonItemGroup>
</IonList>
</IonContent>
13. Add another items
Repeat the previous step to add other items with different data.
14. Add another group and items
Repeat steps 11 and 12 to add another group and items.
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!