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 Settings screen serves as a centralized hub within an application, offering users the ability to customize and configure various aspects of their experience. This section is designed to empower users with control over the application's settings, allowing them to tailor their interaction based on individual preferences and requirements.
This article provides an in-depth guide, empowering both designers and developers to incorporate a user-centric Settings screen into their applications effortlessly. This seamless integration is facilitated by utilizing design components from the Ionic Kit, constructed upon the foundation of the Ionic framework's extensive library.
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 chats-screen blank --type=react
3. Get inside the project directory
cd settings-screen
4. Create the 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. Add header and the content
For convenience, we will be using the layout structure recommended by Ionic (https://ionicframework.com/docs/layout/structure#header) for our screen. This allows us to add header code and content inside the <IonPage></IonPage>.
<IonHeader>
<IonToolbar>
<IonTitle>Logotype</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
...
</IonContent>
6. Add and style the content within the component
Inside the IonContent component, add the <br /> tag to create a line break between components. Next add the IonText component with the class ion-text-center within the IonContent section. This will apply styling to the content within the IonText, providing centering the text according to Ionic's guidelines. Inside the IonText component, include an h1 element with the text "Settings".
<IonContent>
<br />
<IonText className='ion-text-center'>
<h1>Settings</h1>
</IonText>
</IonContent>
7. Organize the list of parameters
Within the IonContent section, place the IonList component with class ion-margin-bottom.
<IonContent>
<br />
<IonText className='ion-text-center'>
<h1>Settings</h1>
</IonText>
<IonList className='ion-margin-top'>
</IonList>
</IonContent>
Additionally, apply the ion-margin-top class to the IonList component to separate it.
8. Within the IonList component, include the IonItem component with the class ion-margin-bottom
<IonContent>
<br />
<IonText className='ion-text-center'>
<h1>Settings</h1>
</IonText>
<IonList className='ion-margin-top'>
<IonItem className='ion-margin-bottom'>
</IonItem>
</IonList>
</IonContent>
In this scenario, IonItem with the ion-margin-bottom class is employed, facilitating the customization of parameter presentation with preferred margins.
9. Specify the parameter name
Within the IonItem component, include the IonLabel component containing the text "Skill level".
<IonText className='ion-text-center'>
<h1>Settings</h1>
</IonText>
<IonList className='ion-margin-top'>
<IonItem className='ion-margin-bottom'>
<IonLabel>Skill level</IonLabel>
</IonItem>
</IonList>
10. Specify and position the parameter value
Add the IonNote component containing the text "Beginner" to specify the parameter value, and set the slot attribute as end to position the parameter value at the end of the line.
<IonText className='ion-text-center'>
<h1>Settings</h1>
</IonText>
<IonList className='ion-margin-top'>
<IonItem className='ion-margin-bottom'>
<IonLabel>Skill level</IonLabel>
<IonNote slot='end'>Beginner</IonNote>
</IonItem>
</IonList>
11. Repeat steps 8 through 10
Add another parameter named Session length with the value of 10 minutes.
<IonList className='ion-margin-top'>
...
<IonItem className='ion-margin-bottom'>
<IonLabel>Session length</IonLabel>
<IonNote slot='end'>10 minutes</IonNote>
</IonItem>
</IonList>
12. Repeat step 8
Add one more IonItem component with the class ion-margin-bottom, similar to step 8.
13. Enable toggling the state of the parameter
Within the IonItem component, place the IonToggle component. Set the attribute checked as true to switch on this parameter by default.
<IonList className='ion-margin-top'>
...
<IonItem className='ion-margin-bottom'>
<IonToggle checked={true}>Listening exercise</IonToggle>
</IonItem>
</IonList>
14. Repeat steps 12 and 13 to add Sound effects parameter
Add another parameter with a toggle named Sound effects.
<IonList className='ion-margin-top'>
...
<IonItem className='ion-margin-bottom'>
<IonToggle checked={true}>Sound effects</IonToggle>
</IonItem>
</IonList>
15. Repeat step 8
Add one more IonItem component with the class ion-margin-bottom, similar to step 8.
16. Add Vibration parameter
Within the IonItem component, place the IonToggle component for a parameter called Vibration
<IonList className='ion-margin-top'>
...
<IonItem className='ion-margin-bottom'>
<IonToggle>Vibration</IonToggle>
</IonItem>
</IonList>
17. Repeat steps 12 and 13 to add the Native assist parameter
Add another parameter with a toggle named Native assist.
<IonList className='ion-margin-top'>
...
<IonItem className='ion-margin-bottom'>
<IonToggle checked={true}>Native assist</IonToggle>
</IonItem>
</IonList>
18. Repeat steps 12 and 13 to add the Motivational cheers parameter
Add another parameter with a toggle named Motivational cheers.
<IonList className='ion-margin-top'>
...
<IonItem className='ion-margin-bottom'>
<IonToggle checked={true}>Motivational cheers</IonToggle>
</IonItem>
</IonList>
19. Repeat steps 8 through 10 to add the Native language parameter
Add another parameter named Native language with the value of English (American).
<IonList className='ion-margin-top'>
...
<IonItem className='ion-margin-bottom'>
<IonLabel>Native language</IonLabel>
<IonNote slot='end'>English (American)</IonNote>
</IonItem>
</IonList>
20. Repeat steps 15 and 16 to add the Notifications parameter
Add another parameter with a toggle named Notifications.
<IonList className='ion-margin-top'>
...
<IonItem className='ion-margin-bottom'>
<IonToggle>Notifications</IonToggle>
</IonItem>
</IonList>
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!