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 Notification Settings Screen is a critical feature in mobile and web applications, allowing users to customize how they receive alerts for different events. A well-designed settings screen provides toggle switch options for enabling or disabling notifications related to messages, updates, promotions, or other app-specific events. This enhances user control, ensuring a personalized experience while preventing notification overload.
This guide will walk you through the steps to design and implement a Notification Settings Screen using the Ionic Design Kit. By leveraging its UI components and the Ionic Framework, you can create a clean, user-friendly, and intuitive settings interface that empowers users to manage their notifications effortlessly.
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 settings blank --type=react
3. Get inside the project directory
cd settings
4. Create a Settings page
Create page Settings.tsx inside src/pages and add code.
import { IonPage } from '@ionic/react';
const Settings: React.FC = () => {
return (
<IonPage></IonPage>
);
};
export default Settings;
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. Place the Back button component
The IonHeader component represents the fixed top section of the page, typically used for navigation and titles. Inside it, the IonToolbar provides a container for buttons, titles, and other controls. The IonButtons component with the slot='start' property ensures that the button is aligned to the left. The IonBackButton component allows navigation to the previous page and is styled with the color='dark' property. The defaultHref='#' ensures that the button has a fallback route, and icon={chevronBack} sets the button's icon.
import { chevronBack } from "ionicons/icons";
...
<IonHeader>
<IonToolbar>
<IonButtons slot='start' className='ion-padding-start'>
<IonBackButton color='dark' defaultHref='#' text='' icon={chevronBack} />
</IonButtons>
</IonToolbar>
</IonHeader>
7. Put the title on top of the page
The IonTitle component, placed within the IonToolbar, defines the page title. It is positioned centrally by default and displays 'Notification settings' to indicate the purpose of the page. This title remains static within the header while the user interacts with the content below.
<IonHeader>
<IonToolbar>
<IonButtons slot='start' className='ion-padding-start'>
<IonBackButton color='dark' defaultHref='#' text='' icon={chevronBack} />
</IonButtons>
<IonTitle>
Notification settings
</IonTitle>
</IonToolbar>
</IonHeader>
This concludes our work with IonHeader, and the following sections will cover working with IonContent.
8. Insert section title and description in content area
The IonContent component serves as a scrollable area that holds the main content of the page. Within it, an IonText element is used to display a section title <h1> with the text 'Purchases and payments'. This <h1> is styled using the className='ion-padding-start' to add padding on the left. Below it, another IonText element contains a <p> that provides a short description of the section’s purpose, explaining that users can set notification preferences for purchases, payments, and deliveries. The same padding class ensures visual consistency.
<IonContent>
<IonText>
<h1 className='ion-padding-start'>
Purchases and payments
</h1>
</IonText>
<IonText>
<p className='ion-padding-start'>
Set notification preferences for your purchases, payments & deliveries.
</p>
</IonText>
</IonContent>
9. Configure notification toggles for purchases and payments
An IonList component is used to group multiple IonItem elements. Each IonItem represents an option with an IonToggle, which acts as a switch to enable or disable specific notifications. Each IonToggle has a nested IonLabel that describes its function, such as 'Payment due', 'Purchase complete', and 'Delivery updates'. The checked={true} property ensures that these toggles are enabled by default, indicating that notifications for these events are initially turned on.
<IonContent>
...
<IonList>
<IonItem>
<IonToggle checked={true}>
<IonLabel>
Payment due
</IonLabel>
</IonToggle>
</IonItem>
<IonItem>
<IonToggle checked={true}>
<IonLabel>
Purchase complete
</IonLabel>
</IonToggle>
</IonItem>
<IonItem>
<IonToggle checked={true}>
<IonLabel>
Delivery updates
</IonLabel>
</IonToggle>
</IonItem>
</IonList>
</IonContent>
10. Extend notification settings with deals and offers
Similar to the previous section, a new IonText with <h1> introduces the 'Deals, offers and surprises' section. The IonList follows the same pattern as before but with different content inside each IonItem. The IonToggle components represent options such as 'Saved items on sale', 'Offers and surprises', and 'Rewards club update'. Only 'Rewards club update' has the checked={true} attribute, meaning it is enabled by default, while the other toggles are initially off.
<IonContent>
...
<IonList>
<IonItem>
<IonToggle checked={false}>
<IonLabel>
Saved items on sale
</IonLabel>
</IonToggle>
</IonItem>
<IonItem>
<IonToggle checked={false}>
<IonLabel>
Offers and surprises
</IonLabel>
</IonToggle>
</IonItem>
<IonItem>
<IonToggle checked={true}>
<IonLabel>
Rewards club update
</IonLabel>
</IonToggle>
</IonItem>
</IonList>
</IonContent>
11. Enable marketing email preferences
Following the same structure, the 'Marketing emails' section begins with an IonText containing an <h1>, followed by a <p> that provides additional context about marketing preferences. The IonList includes a single IonItem with an IonToggle, allowing users to opt in or out of receiving marketing emails. This toggle has checked={true}, meaning it is turned on by default. The overall layout and spacing remain consistent with previous sections to maintain a uniform design.
<IonContent>
<IonText>
<h1 className='ion-padding-start ion-padding-top'>
Marketing emails
</h1>
</IonText>
<IonText>
<p className='ion-padding-start ion-padding-end'>
To be contacted with marketing, promotions and surprises from Klarna, our merchants or partners. Read more in our Privacy Notice.
</p>
</IonText>
<IonList>
<IonItem>
<IonToggle checked={true}>
<IonLabel>
Receive marketing emails
</IonLabel>
</IonToggle>
</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!