IONIC - 3.5 Creation of a to do list (1)
Click here for more videos available on our youtube channel !We start by building the HTML page of a small to-do list, watching it rebuild live in the terminal each time we save home.page.html. First we change the page title to "Tasks". Inside <ion-content> we add an <ion-list> and an <ion-list-header> with the label "My tasks". Below the header we insert an <ion-card> with a CSS class tasks, containing an <ion-checkbox> followed by an <h4> tag with the class task-title and the name of a sample task such as "do the dishes".
Next to the title, we add an <ion-button> with the fill attribute set to remove the background, the color danger for red, an inline float: right style for positioning, and a trash icon to display a trash-can shape. Below the list, we add an <ion-footer> that contains an <ion-item> with an <ion-input> inside. The input gets a placeholder set to "add a new task" so the user knows what to type. Right after it, we place a button to insert the new task: we give it a rounded shape, the color="primary" attribute and an add icon.
Add and cancel buttons
Looking at the result in the browser, we already see all our Ionic tags rendered, with a checkbox we can toggle. We then add two more buttons to confirm or cancel the entry. We wrap them inside an <ion-buttons> tag containing two <ion-button> children. The first button uses the primary color and an icon — for icons, the official documentation at ionicframework.com/docs lists all of them under the components section, with overview, icon name and ready-to-copy snippets.
We pick the icon add-circle for the add button and we do not forget to set its slot="end" for proper positioning. We then copy that button, change the color to danger and the icon to backspace, which becomes the cancel button. The page now shows both buttons at the bottom, ready to be wired up. In the next video we will add the logic in TypeScript to actually create, check and remove tasks. See you soon.
Summary
This lesson demonstrates how to build a functional to-do list application using Ionic 3.5 framework. You'll learn to structure the HTML using Ionic components like ion-content, ion-list, and ion-item, while adding interactive elements such as task input fields and action buttons. The tutorial covers styling with Ionic's built-in classes and integrating icons for delete and add operations.
Key points
- Use Ionic components (ion-content, ion-list, ion-item, ion-footer) to structure a to-do list interface
- Implement task display with h4 headers and proper CSS classes for layout and styling
- Create action buttons with Ionic's button component, using primary and danger color styles
- Integrate Ionic icons from the official documentation (trash icon for delete, add icon for new tasks)
- Build an input section in the footer with placeholder text and button controls for task management
- Apply CSS properties like float and display options for responsive button positioning
FAQ
What Ionic components are essential for building a to-do list?
The core components are ion-content (page container), ion-list (task container), ion-item (individual task container), ion-footer (input section), and ion-button (interactive controls). These components provide the structural foundation and styling consistency for the application.
How do you add icons to task buttons in Ionic 3.5?
Use the ion-icon component with the name attribute. You can reference the official Ionic documentation at ionic.io/docs/v3 to browse available icons like 'trash' for delete operations and other action icons.
What styling options are available for Ionic buttons in this lesson?
Ionic provides color variants like 'primary' for positive actions and 'danger' for destructive actions. You can further customize buttons with the 'round' attribute for rounded corners and additional CSS classes for layout positioning (e.g., float-right).