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 Edit Profile Screen is a central element in user interface design, serving as a gateway for users to manage and update their personal information within an application. It plays a pivotal role in providing users with the ability to customize their profiles according to their preferences and needs. By presenting an intuitive and visually appealing interface, the Edit Profile Screen enhances user engagement and facilitates a seamless experience.
This comprehensive guide empowers designers and developers to seamlessly integrate a user-centric Edit Profile Screen into their applications. Leveraging design components from the Ionic Kit, built upon the solid foundation of the extensive Ionic framework library, ensures effortless integration and consistency in design, ultimately enhancing the overall usability and satisfaction of the application.
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 edit-profile-screen blank --type=react
3. Get inside the project directory
cd edit-profile-screen
4. Create a Tab bar component
Use this instruction to create a Tab bar component.
5. Create a Profile page
Create page Profile.tsx inside src/pages and add code.
import { IonPage } from '@ionic/react';
const Profile: React.FC = () => {
return (
<IonPage></IonPage>
);
};
export default Profile;
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 the IonButtons component and set the slot to start. This positions the button at the beginning of the toolbar.
Within the IonButtons component, include the IonBackButton component, setting the properties defaultHref='#' and text='' to create a back button that navigates back in the app's history upon being clicked. To customize the default icon, set the icon property to {arrowBack}. Please make sure that you’ve imported the icon from Ionic icons.
import { arrowBack } from "ionicons/icons";
...
<IonHeader>
<IonToolbar>
<IonButtons slot="start" className="ion-padding-start">
<IonBackButton
defaultHref="#"
text=""
icon={arrowBack}
></IonBackButton>
</IonButtons>
</IonToolbar>
</IonHeader>
8. Put the title on top of the page
After the IonButtons component, place the IonTitle with the text 'Profile info' to add a title for this page.
<IonHeader>
<IonToolbar>
<IonButtons slot="start" className="ion-padding-start">
<IonBackButton
defaultHref="#"
text=""
icon={arrowBack}
></IonBackButton>
</IonButtons>
<IonTitle>Profile info</IonTitle>
</IonToolbar>
</IonHeader>
9. Place the Action button component
Include another IonButtons component and set the slot to end. This positions the button at the end of the toolbar.
Within the IonButtons component, incorporate the IonIcon component and set the slot property to icon-only and icon property to checkmark.
import { checkmark, arrowBack } from "ionicons/icons";
...
<IonHeader>
<IonToolbar>
<IonButtons slot="start" className="ion-padding-start">
<IonBackButton
defaultHref="#"
text=""
icon={arrowBack}
></IonBackButton>
</IonButtons>
<IonTitle>Profile info</IonTitle>
<IonButtons slot="end" className="ion-padding-end">
<IonButton>
<IonIcon slot="icon-only" icon={checkmark}></IonIcon>
</IonButton>
</IonButtons>
</IonToolbar>
</IonHeader>
This concludes our work with IonHeader, and the following sections will cover working with IonContent.
10. Leave some space before the content
Inside the IonContent component, add a <br /> tag to create space before the content.
<IonContent>
<br />
</IonContent>
11. Place the Avatar block
Inside the IonItem component, add the IonAvatar component with the slot attribute set to start. Use the <img> tag within IonAvatar to display the avatar image, specifying the alt attribute for the image description and src for the image path.
Next, use the IonLabel component to add additional information. Use the <h5> and <p> tags to display the texts 'Update your photo' and 'Upload a photo under 2 MB' respectively.
<IonItem>
<IonAvatar slot="start">
<img
alt="Silhouette of a person's head"
src="avatar.png"
/>
</IonAvatar>
<IonLabel>
<h5>Update your photo</h5>
<p>Upload a photo under 2 MB</p>
</IonLabel>
</IonItem>
12. Organize the list of parameters
Within the IonContent section, place the IonList.
<IonContent>
...
<IonList></IonList>
</IonContent>
13. Place the First name block
Inside the IonList component, add an IonItem component.
Within this IonItem, include an IonInput component with the following properties: set label to First name, labelPlacement to stacked so the label appears above the input, clearOnEdit={true}, and placeholder to Oscar.
<IonList>
<IonItem>
<IonInput
label="First name"
labelPlacement="stacked"
clearOnEdit={true}
placeholder="Oscar"
></IonInput>
</IonItem>
</IonList>
14. Add the following blocks with the same parameters
Repeat the previous step for the next three blocks, adjusting only the values of the label and placeholder attributes as required for each field.
<IonList>
...
<IonItem>
<IonInput
label="Last name"
labelPlacement="stacked"
clearOnEdit={true}
placeholder="Smith"
></IonInput>
</IonItem>
<IonItem>
<IonInput
label="Email"
labelPlacement="stacked"
clearOnEdit={true}
placeholder="[email protected]"
></IonInput>
</IonItem>
<IonItem>
<IonInput
label="Phone"
labelPlacement="stacked"
clearOnEdit={true}
placeholder="+1 (233) 456-7890"
></IonInput>
</IonItem>
</IonList>
15. Add the Password block
The same components as in the previous steps are used here: IonItem and IonInput, with an additional parameter this time, type='password'.
<IonList>
<IonItem>
<IonInput
label="Password"
type="password"
labelPlacement="stacked"
clearOnEdit={true}
placeholder="●●●●●●●●"
></IonInput>
</IonItem>
</IonList>
16. Add the Change password button
Add the IonButton component with the following properties: set color to medium, className to ion-margin-top and ion-margin, fill to outline and size to small. The button text should be 'Change your password'.
<IonList>
...
<IonButton
color="medium"
className='ion-margin-top ion-margin'
fill="outline"
size="small"
>Change your password</IonButton>
</IonList>
17. Add the Delete button
After the IonList component, insert a <br /> tag to create additional space. Then, add an IonButton with the following properties: set expand to block, className to ion-margin, and fill to outline. The button text should be 'Delete your account'.
<IonContent>
...
<IonList>
...
</IonList>
<br />
<IonButton
expand="block"
className="ion-margin"
fill="outline"
>Delete your account</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!