How to create a To-Do list screen

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.

A To-Do List Screen is a core feature in productivity apps, allowing users to create, manage, and track tasks efficiently. This screen enhances productivity by providing a clear, organized view of pending tasks and the calendar to set the priorities. With a well-structured To-Do List Screen, users can stay on top of their responsibilities, achieve their goals, and improve time management.

This guide will walk you through designing and implementing a To-Do List Screen using the Ionic Design Kit. By leveraging its ready-to-use components and the Ionic Framework, you can create a dynamic, user-friendly experience that supports task creation, editing, and completion with ease.

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 todo blank --type=react

3. Get inside the project directory

cd todo

4. Create a Tab bar component

Use this instruction to create a Tab bar component.

5. Create a Todo page

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

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

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

export default Todo;

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 tasks' to add a title for this page.

<IonHeader>
    <IonToolbar>
        <IonButtons slot='start' className='ion-padding-start'>
            <IonBackButton text='' defaultHref='#' icon={arrowBack} />
        </IonButtons>
        <IonTitle>My tasks</IonTitle>
    </IonToolbar>
</IonHeader>

9. Place the Add button

Inside the IonToolbar component, add an IonButtons component with the slot set to end, positioning the button at the ending of the toolbar. Also, add className='ion-padding-end' to provide padding at the end.

Within the IonButtons component, incorporate the IonButton with IonIcon component inside with slot property to icon-only and icon to {add}.

<IonHeader>
    <IonToolbar>
        <IonButtons slot='start' className='ion-padding-start'>
            <IonBackButton text='' defaultHref='#' icon={arrowBack} />
        </IonButtons>
        <IonTitle>My tasks</IonTitle>
        <IonButtons slot='end' className='ion-padding-end'>
            <IonButton>
                <IonIcon slot='icon-only' icon={add} />
            </IonButton>
        </IonButtons>
    </IonToolbar>
</IonHeader>

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

10. Create a Calendar

Start by wrapping all your content in an IonContent component. This ensures your app's content is scrollable and styled consistently with Ionic's layout system. Inside IonContent, add the IonDatetime component with the presentation='date' property to display a date picker. Use the locale attribute to set the language, such as en-En for English. Include <br /> tags before the calendar to create visual spacing between it and other elements.

<IonContent>
    <br />
    <IonDatetime presentation='date' locale='en-En'>
    </IonDatetime>
</IonContent>

Implement a segmented control with the IonSegment component to allow users to switch between views (e.g., Today, Week, Month). Each segment option is represented by an IonSegmentButton containing an IonLabel for its text. Add a <br /> tag above the segment to visually separate it from the preceding calendar. Wrap the entire segment in a <div> with the ion-padding-horizontal class. This wrapper ensures consistent horizontal padding for the segment, maintaining a neat layout.

<IonContent>
    ...
    <br />
    <div className='ion-padding-horizontal'>
        <IonSegment value='today'>
            <IonSegmentButton value='today'>
                <IonLabel>
                  Today
                </IonLabel>
            </IonSegmentButton>
            <IonSegmentButton value='week'>
                <IonLabel>
                    Week
                </IonLabel>
            </IonSegmentButton>
            <IonSegmentButton value='month'>
                <IonLabel>
                    Month
                </IonLabel>
            </IonSegmentButton>
        </IonSegment>
    </div>
</IonContent>

12. Build a Checklist

Use an IonList to structure the task list, and IonItem for each task entry. The ion-margin-top class applied to the IonList adds vertical spacing between the list and the preceding elements. Include IonCheckbox components with properties like label-placement='end' and checked to control the placement of labels and mark items as pre-checked. The justify attribute in IonCheckbox is used to align the checkbox content within the item. The slot='start' attribute places the checkbox at the start of the item, ensuring a logical and clear visual hierarchy for the list. Add descriptive text for each task inside the checkbox tags to convey the task's purpose.

<IonContent>
    ...
    <IonList lines='none' className='ion-margin-top'>
        <IonItem>
            <IonCheckbox slot='start' justify='start' label-placement='end' checked>
                Walk the dog
            </IonCheckbox>
        </IonItem>
        <IonItem>
            <IonCheckbox slot='start' justify='start' label-placement='end' checked>
                Meditation
            </IonCheckbox>
        </IonItem>
        <IonItem>
            <IonCheckbox slot='start' justify='start' label-placement='end'>
                Workout
            </IonCheckbox>
        </IonItem>
        <IonItem>
            <IonCheckbox slot='start' justify='start' label-placement='end'>
                Work
            </IonCheckbox>
        </IonItem>
        <IonItem>
            <IonCheckbox slot='start' justify='start' label-placement='end'>
                Buy a gift for mom for Christmas
            </IonCheckbox>
        </IonItem>
        <IonItem>
            <IonCheckbox slot='start' justify='start' label-placement='end'>
                Carry trash
            </IonCheckbox>
        </IonItem>
    </IonList>
</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!