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 Mood Tracker Screen is a valuable feature in wellness, self-care, and mental health apps, helping users log their daily moods and track emotional patterns over time. A well-designed mood tracker includes an emoji or icon selector for quick input, a date picker, and notes fields for additional context.
This guide will walk you through the steps to design and implement a Mood Tracker Screen using the Ionic Design Kit. By leveraging its ready-to-use UI components and the Ionic Framework, you can create a clean, interactive, and encouraging interface.
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 mood-tracker blank --type=react
3. Get inside the project directory
cd mood-tracker
4. Create a Mood tracker page
Create page MoodTracker.tsx inside src/pages and add code.
import { IonPage } from '@ionic/react';
const MoodTracker: React.FC = () => {
return (
<IonPage></IonPage>
);
};
export default MoodTracker;
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>
6. Set up page header with toolbar
The IonPage wraps the entire screen content. IonToolbar provides a container for header elements. IonTitle displays the title 'Mood tracker'. IonButtons with slot="end" places a button on the right. Inside it, IonButton renders a clickable area, and IonIcon with icon={close} shows the close icon.
<IonHeader>
<IonToolbar>
<IonTitle>Mood tracker</IonTitle>
<IonButtons slot="end">
<IonButton>
<IonIcon icon={close} />
</IonButton>
</IonButtons>
</IonToolbar>
</IonHeader>
This concludes our work with IonHeader, and the following sections will cover working with IonContent.
7. Display heading section
The IonContent tag is the main scrollable area of the screen. The <h2> tag is used for the section heading 'How are you feeling?', with inline styles to add bottom spacing. The class ion-padding-start adds horizontal padding to the start of the element based on Ionic's layout system.
...
<IonContent>
<h2 style={{ marginBottom: "20px" }} className="ion-padding-start">
How are you feeling?
</h2>
</IonContent>
8. Build mood selection
An array moodOptions defines different mood choices with emojis and labels. A <div> with display: flex lays out the mood options in a row. Each mood is rendered using .map(). Inside, a nested <div> contains the emoji with large font size. Below that, a <p> tag displays the mood label in smaller, grey text using color and fontSize styling.
const moodOptions = [
{ label: "Unhappy", emoji: "😣" },
{ label: "", emoji: "😞" },
{ label: "Normal", emoji: "😐" },
{ label: "", emoji: "😊" },
{ label: "Happy", emoji: "😄" },
];
<IonContent>
...
<div
style={{
display: "flex",
justifyContent: "space-between",
marginBottom: "14px",
}}
>
{moodOptions.map((mood, index) => (
<div key={index} style={{ textAlign: "center", flex: 1 }}>
<div style={{ fontSize: 36, marginBottom: "6px" }}>
{mood.emoji}
</div>
<p
color="medium"
style={{ margin: "0", fontSize: "12px", color: "#5F5F5F" }}
>
{mood.label}
</p>
</div>
))}
</div>
</IonContent>
9. Organize input fields and labels
The IonList groups the interactive input items. The lines="none" attribute removes default divider lines between items. Each IonItem acts as a container. IonTextarea allows users to write notes, with the label, placeholder, and label-placement="stacked" attributes showing label above the field. Other IonItem elements contain IonLabel for section labels and descriptions. <p> inside the labels shows section names like 'Feelings', and a trailing IonIcon with slot="end" displays the add icon aligned to the right.
<IonContent>
...
<IonList lines="none">
<IonItem>
<IonTextarea
label="Your note"
placeholder="Add a note..."
label-placement="stacked"
/>
</IonItem>
<IonItem>
<IonLabel>
<p style={{ fontSize: "12px", marginBottom: "12px" }}>Feelings</p>
Which words can describe your feelings?
</IonLabel>
<IonIcon
slot="end"
icon={addCircleOutline}
style={{ marginTop: "auto" }}
/>
</IonItem>
<IonItem>
<IonLabel>
<p style={{ fontSize: "12px", marginBottom: "12px" }}>
Activities
</p>
What have you been up to?
</IonLabel>
<IonIcon
slot="end"
icon={addCircleOutline}
style={{ marginTop: "auto" }}
/>
</IonItem>
<IonItem>
<IonLabel>
<p style={{ fontSize: "12px", marginBottom: "12px" }}>Photo</p>
What photo recaptures the atmosphere of the day?
</IonLabel>
</IonItem>
</IonList>
</IonContent>
10. Add photo placeholder
An IonCard creates a visual container for an image placeholder. Inline styles set height, background color, and margins. IonCardContent centers its content both vertically and horizontally using flexbox. Inside, IonIcon with icon={imagesOutline} and size="large" shows a large photo icon as a placeholder for a future image upload.
<IonContent>
...
<IonCard
style={{
height: "160px",
background: "#E6E6E6",
marginBottom: "36px",
marginTop: "8px",
}}
>
<IonCardContent
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "100%",
}}
>
<IonIcon size="large" icon={imagesOutline} />
</IonCardContent>
</IonCard>
</IonContent>
11. Implement save button
An IonButton placed at the bottom is used to trigger the save action. The expand="block" attribute makes it full-width. The class names ion-margin-start and ion-margin-end add horizontal margins, keeping the button from touching the screen edges. The button displays the text 'Save'.
<IonContent>
...
<IonButton expand="block" className="ion-margin-start ion-margin-end">
Save
</IonButton>
</IonContent>
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!