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.
The Statistics or Report screen is a dedicated section within an application that presents users with numerical data, visual representations, or analytical insights related to various aspects of the app or user activities. This screen serves as an informational dashboard, providing users with a snapshot of key metrics, trends, or performance indicators.
This article offers a comprehensive guide for designers and developers, making it easy for them to seamlessly integrate a user-friendly Statistics screen into their applications. The smooth integration is achieved by employing design components from the Ionic Kit, built upon the robust foundation of the extensive Ionic framework library.
1. Install Ionic CLI with 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 statistics-screen blank --type=react
3. Get inside the project directory
cd statistics-screen
4. Create a new page
Create page Statistics.tsx inside src/pages and add code.
import { IonPage } from '@ionic/react';
const Statistics: React.FC = () => {
return (
<IonPage></IonPage>
);
};
export default Statistics;
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. Add the header and name the page
For convenience, we will be using the layout structure recommended by Ionic for all our screens. This allows us to add header code and content inside the <IonPage></IonPage>.
<IonPage>
<IonHeader>
<IonToolbar>
...
</IonToolbar>
</IonHeader>
<IonContent>
...
</IonContent>
</IonPage>
6. Add the button at the beginning of the toolbar
Inside the IonToolbar component, add the IonButtons component and set the slot to start. This positions the button at the beginning of the toolbar.
<IonHeader>
<IonToolbar>
<IonButtons slot='start'></IonButtons>
</IonToolbar>
</IonHeader>
7. Place the return button
Within the IonButtons component, include the IonBackButton component, setting the properties defaultHref='#' and text='', to create a back button that navigates back in the app's history upon being clicked.
<IonHeader>
<IonToolbar>
<IonButtons slot='start'>
<IonBackButton defaultHref='#' text=''></IonBackButton>
</IonButtons>
</IonToolbar>
</IonHeader>
8. Add the page title
After the IonButtons component, place the IonTitle with the text 'Statistics' to add a title for this page.
<IonHeader>
<IonToolbar>
<IonButtons slot='start'>
<IonBackButton defaultHref='#' text=''></IonBackButton>
</IonButtons>
<IonTitle>Statistics</IonTitle>
</IonToolbar>
</IonHeader>
9. Add the button at the end of the toolbar
After the IonTitle component, include another IonButtons component and set the slot to end. This positions the buttons at the end of the toolbar.
<IonHeader>
<IonToolbar>
<IonButtons slot='start'>
<IonBackButton defaultHref='#' text=''></IonBackButton>
</IonButtons>
<IonTitle>Statistics</IonTitle>
<IonButtons slot='end'>
</IonButtons>
</IonToolbar>
</IonHeader>
10. Within the IonButtons add the IonButton component
11. Place the icon within the button
Inside the IonButton component, place the IonIcon component with the properties slot='icon-only' and icon={ellipsisHorizontal} to define that this component should be used as an icon in an option that has no text, using the icon from Ionic icons.
<IonHeader>
<IonToolbar>
<IonButtons slot='start'>
<IonBackButton defaultHref='#' text=''></IonBackButton>
</IonButtons>
<IonTitle>Statistics</IonTitle>
<IonButtons slot='end'>
<IonButton>
<IonIcon slot='icon-only' icon={ellipsisHorizontal}></IonIcon>
</IonButton>
</IonButtons>
</IonToolbar>
</IonHeader>
12. Repeat steps 10 and 11 to add another IonButton and set the property icon={addOutline}
<IonHeader>
<IonToolbar>
<IonButtons slot='start'>
<IonBackButton defaultHref='#' text=''></IonBackButton>
</IonButtons>
<IonTitle>Statistics</IonTitle>
<IonButtons slot='end'>
<IonButton>
<IonIcon slot='icon-only' icon={ellipsisHorizontal}></IonIcon>
</IonButton>
<IonButton>
<IonIcon slot='icon-only' icon={addOutline}></IonIcon>
</IonButton>
</IonButtons>
</IonToolbar>
</IonHeader>
13. Next, following the IonHeader component, add the IonContent component and apply the ion-padding-top and the ion-text-center classes to style the content within
<IonHeader>
...
</IonHeader>
<IonContent className='ion-padding-top ion-text-center'>
</IonContent>
14. Inside the IonContent component, add the <br /> tag to create a line break, and place the IonChip component with the text 'USD' and the class ion-margin. Set the color property to medium to style the component
<IonContent className='ion-padding-top ion-text-center'>
<br />
<IonChip color='primary' className='ion-margin'>USD</IonChip>
</IonContent>
15. Next add the IonText component and include an h1 tag with the text '$4,500.00'
<IonContent className='ion-padding-top ion-text-center'>
<br />
<IonChip color='primary' className='ion-margin'>USD</IonChip>
<IonText>
<h1 className='ion-no-margin'>$4,500.00</h1>
</IonText>
</IonContent>
16. After that, add another IonText component with the text 'Balance' and set the property color='medium' to style the text color inside
<IonContent className='ion-padding-top ion-text-center'>
<br />
<IonChip color='primary' className='ion-margin'>USD</IonChip>
<IonText>
<h1 className='ion-no-margin'>$4,500.00</h1>
</IonText>
<IonText color='medium'>Balance</IonText>
</IonContent>
17. After that, add another IonText component with the class ion-text-start to style the text position inside. Within the IonText add the h5 tag with the class ion-padding start and place the text 'Today' inside
<IonContent className='ion-padding-top ion-text-center'>
<br />
<IonChip color='primary' className='ion-margin'>USD</IonChip>
<IonText>
<h1 className='ion-no-margin'>$4,500.00</h1>
</IonText>
<IonText color='medium'>Balance</IonText>
<IonText className='ion-text-start'>
<h5 className='ion-padding-start'>Today</h5>
</IonText>
</IonContent>
18. Add the list component after the break line
Add the <br /> tag to create a break line and place the IonList component to organize items.
<IonContent className='ion-padding-top ion-text-center'>
...
<br />
<IonList>
</IonList>
</IonContent>
19. Create an item inside the list
Inside the IonList add the IonItem with class ion-margin-bottom to style the component.
<IonContent className='ion-padding-top ion-text-center'>
...
<br />
<IonList>
<IonItem className='ion-margin-bottom'>
</IonItem>
</IonList>
</IonContent>
20. Name the label inside the item
Within the IonItem add the IonLabel component with the text 'Fitness'.
<IonList>
<IonItem className='ion-margin-bottom'>
<IonLabel>Fitness</IonLabel>
</IonItem>
</IonList>
21. Add the note component at the end of the item
Add the IonNote component with the text '-$20.00' and set the property slot as end to position the text at the end of the item.
<IonItem className='ion-margin-bottom'>
<IonLabel>Fitness</IonLabel>
<IonNote slot='end'>-$20.00</IonNote>
</IonItem>
22. Repeat steps 19 to 21 to add another IonItem
Set the text 'Cafe' inside the IonLabel component and the text '-$180.00' inside the IonIcon.
23. Repeat steps 19 to 21 to add another IonItem
Set the text 'Transfer' inside the IonLabel component and the text '+$1500.00' inside the IonIcon.
24. Repeat steps 19 to 21 to add another IonItem
Set the text 'Health and care' inside the IonLabel component and the text '-$180.00' inside the IonIcon.
25. Repeat steps 19 to 21 to add another IonItem
Set the text 'Online shopping' inside the IonLabel component and the text '-$340.00' inside the IonIcon.
26. Add the text inside the list
After the IonList, add the IonText component with the class ion-text-start to style the text position inside. Within the IonText add the h5 tag with the class ion-padding start and place the text 'Yesterday' inside.
<IonContent className='ion-padding-top ion-text-center'>
...
<IonText className='ion-text-start'>
<h5 className='ion-padding-start'>Yesterday</h5>
</IonText>
</IonContent>
27. Add another list component after the break line
Add the <br /> tag to create a break line and place the IonList component to organize items.
<IonContent className='ion-padding-top ion-text-center'>
...
<IonText className='ion-text-start'>
<h5 className='ion-padding-start'>Yesterday</h5>
</IonText>
<br />
<IonList>
</IonList>
</IonContent>
28. Repeat steps 19 to 21 to add the IonItem component to the IonList
Set the text 'Cafe' inside the IonLabel component and the text '-$180.00' inside the IonIcon.
29. Repeat steps 19 to 21 to add another IonItem
Set the text 'Transfer' inside the IonLabel component and the text '+$560.00' inside the IonIcon.
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!