How to create a User profile 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.

The User Profile Screen is an essential feature in modern app design, serving as a personalized hub where users can view and manage their account information. This screen plays a crucial role in enhancing user experience by offering a tailored interface that aligns with the user’s preferences and needs. A well-crafted User Profile Screen fosters engagement, trust, and usability, which are key to a successful application.

This guide will walk you through designing and implementing a User Profile Screen using the Ionic Design Kit. By leveraging its design elements and the Ionic Framework, you can ensure seamless integration, maintain design consistency, and deliver a user-friendly experience that stands out.

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 user-profile-screen blank --type=react

3. Get inside the project directory

cd user-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 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
                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' 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</IonTitle>
  </IonToolbar>
</IonHeader>

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

9. Leave some space before the content

Inside the IonContent component, add a <br /> tag to create space before the content.

<IonContent>
  <br />
</IonContent>

10. 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 <h2> and <p> tags to display the texts 'Oscar Smith' and 'Show profile' respectively.

<IonContent>
    <br />
    <IonItem button={true}>
        <IonAvatar slot='start'>
            <img alt='avatar' src='ava.jpg' />
        </IonAvatar>
        <IonLabel>
            <h2>Oscar Smith</h2>
            <p>Show profile</p>
        </IonLabel>
    </IonItem>
</IonContent>

11. Organize the list of parameters

Within the IonContent section, place the IonList.

<IonContent>
  ...
  <IonList></IonList>
</IonContent>

12. Add the list title

Inside the IonList component, add an IonListHeader component containing an <h4> tag with the text 'Account settings'.

<IonContent>
    ...
    <IonList>
        <IonListHeader>
            <h4>Account settings</h4>
        </IonListHeader>
</IonContent>

13. Add first list item

Add IonItem component with property button set to {true} the following components inside:

IonIcon with icon set to {personCircleOutline} and slot set to start.
IonLabel with text 'Personal information' and custom css class point.

<IonList>
    ...
    <IonItem button={true}>
        <IonIcon icon={personCircleOutline} slot="start"></IonIcon>
        <IonLabel className='point'>Personal information</IonLabel>
    </IonItem>
</IonList>

14. Add additional items

Repeat the previous step to add more items, adjusting only the icon types and the text inside each IonLabel.

<IonList>
    ...
    <IonItem button={true}>
        <IonIcon icon={cashOutline} slot="start"></IonIcon>
        <IonLabel className='point'>Payments and disbursements</IonLabel>
    </IonItem>
    <IonItem button={true}>
        <IonIcon icon={documentOutline} slot="start"></IonIcon>
        <IonLabel className='point'>Taxes</IonLabel>
    </IonItem>
    <IonItem button={true}>
        <IonIcon icon={shieldHalfOutline} slot="start"></IonIcon>
        <IonLabel className='point'>Login and security</IonLabel>
    </IonItem>
    <IonItem button={true}>
        <IonIcon icon={settingsOutline} slot="start"></IonIcon>
        <IonLabel className='point'>Accessible environment</IonLabel>
    </IonItem>
    <IonItem button={true}>
        <IonIcon icon={languageOutline} slot="start"></IonIcon>
        <IonLabel className='point'>Translation</IonLabel>
    </IonItem>
    <IonItem button={true}>
        <IonIcon icon={notificationsOutline} slot="start"></IonIcon>
        <IonLabel className='point'>Notifications</IonLabel>
    </IonItem>
    <IonItem button={true}>
        <IonIcon icon={lockClosedOutline} slot="start"></IonIcon>
        <IonLabel className='point'>Privacy and security</IonLabel>
    </IonItem>
</IonList>

15. Add another title and items

Repeat steps 12 and 13 to add a new title with the text 'Support' and additional items.

<IonList>
    ...
    <IonListHeader>
        <h4>Support</h4>
    </IonListHeader>
    <IonItem button={true}>
        <IonIcon icon={helpCircleOutline} slot="start"></IonIcon>
        <IonLabel className='point'>To help center</IonLabel>
    </IonItem>
    <IonItem button={true}>
        <IonIcon icon={shieldOutline} slot="start"></IonIcon>
        <IonLabel className='point'>Help with security</IonLabel>
    </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!