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 Contacts Screen is a fundamental feature in messaging apps, social networking platforms, and business tools. It serves as a centralized hub for managing and accessing user connections, enabling seamless communication and interaction. A well-designed Contacts Screen enhances user experience by providing intuitive navigation, search functionality, and clear organization of contacts.
This guide will walk you through the steps to design and implement a Contacts Screen using the Ionic Design Kit. By leveraging its design elements and the Ionic Framework, you can create a clean, responsive, and user-friendly interface that enhances connectivity and engagement.
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 contacts blank --type=react
3. Get inside the project directory
cd contacts
4. Create a Tab bar component
Use this instruction to create a Tab bar component.
5. Create a Contacts page
Create page Contacts.tsx inside src/pages and add code.
import { IonPage } from '@ionic/react';
const Contacts: React.FC = () => {
return (
<IonPage></IonPage>
);
};
export default Contacts;
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. Put the title on top of the page
Place the IonTitle with the text 'My friends' to add a title for this page.
<IonHeader>
<IonToolbar>
<IonTitle>My friends</IonTitle>
</IonToolbar>
</IonHeader>
8. Add a Searchbar
Place an additional IonToolbar inside IonHeader to include extra functionality. In this case, the second IonToolbar contains an IonSearchbar for searching.
<IonHeader>
<IonToolbar>
<IonTitle>My friends</IonTitle>
</IonToolbar>
<IonToolbar>
<IonSearchbar placeholder='Search' />
</IonToolbar>
</IonHeader>
This concludes our work with IonHeader, and the following sections will cover working with IonContent.
9. Add friend recommendation and list update sections
This section consists of an IonList component containing IonItem elements, each representing an action related to managing friends. The first IonItem suggests adding friends by recommendation. It includes an IonIcon with the personAdd icon, styled in the primary color. The IonLabel displays a title 'Add friends by recommendation' in an <h2> element and a short description 'Maybe you know these people' in a <p> element.
The second IonItem provides an option to update the friends list. It features an IonIcon with the people icon, also styled in primary color. The IonLabel contains an <h2> title 'Update your friends list' and a <p> description 'Look at who you don't socialize much with.'.
Both items have the button={true} attribute, making them interactive elements for navigation or further actions. The lines="none" attribute removes separating lines between list items, ensuring a clean design.
<IonContent>
<IonList lines='none'>
<IonItem className='ion-margin-top' button={true}>
<IonIcon slot='start' icon={personAdd} color='primary' />
<IonLabel>
<h2>Add friends by recommendation</h2>
<p>Maybe you know these people</p>
</IonLabel>
</IonItem>
<IonItem lines="none" button={true}>
<IonIcon slot="start" icon={people} color="primary" />
<IonLabel>
<h2>Update your friends list</h2>
<p>Look at who you don't socialize much with.</p>
</IonLabel>
</IonItem>
</IonList>
</IonContent>
10. Add the Friend requests section
This section contains a dividing element <div className='line-one'></div>, which visually separates it from other parts of the interface. Following this, an IonItem represents the friend request header, displaying 'Friends requests' within an IonLabel. An IonNote with the text 'Show all', styled in primary color, serves as a link or button for viewing all friend requests. The lines='none' attribute ensures a seamless look without borders.
Below, an IonItem represents an individual friend request. It includes an IonAvatar displaying the user's profile image ff-1.png, with an alt text 'avatar'. The IonLabel contains an <h2> title 'Ava Byrne' and a <p> text 'New user', indicating the person's status. On the right side, an IonIcon with the add icon, styled in primary color, serves as an action button to accept the request. The button attribute makes the item interactive, while detail={true} and detailIcon={closeOutline} suggest an option for closing or dismissing the request.
<IonContent>
...
<div className='line-one'></div>
<IonItem lines='none'>
<IonLabel>
Friends requests
</IonLabel>
<IonNote color='primary'>
Show all
</IonNote>
</IonItem>
<IonItem button detail={true} detailIcon={closeOutline} lines='none'>
<IonAvatar slot='start'>
<img src='ff-1.png' alt='avatar' />
</IonAvatar>
<IonLabel>
<h2>Ava Byrne</h2>
<p>New user</p>
</IonLabel>
<IonIcon slot='end' icon={add} color='primary' />
</IonItem>
</IonContent>
11. Add the My friends section
A dividing element <div className='line'></div> visually separates this section from others. Following this, an IonList contains a header with an IonListHeader displaying 'My friends' inside a <p> tag. The lines='none' attribute ensures that the list does not have visible separators.
Each friend is represented by an IonItem, which includes:
An IonAvatar on the left slot='start' displaying a profile image with a corresponding alt='avatar'.
An IonLabel containing the friend's name <h2> and, where available, additional details such as age and location <p>.
An IonIcon on the right slot='end' with the chatbubbleOutline icon in primary color, likely serving as a button for initiating a chat.
The listed friends are: Isabella Garcia (25 years old, Calgary), Tracy Lam (no additional details), Daniel Smith (Toronto), Charlotte Williams (no additional details), Liam Davis (41 years old), Jacob Rodriguez (36 years old, Mississauga).
Each IonItem follows the same structure, ensuring a uniform and clean display.
<IonContent>
...
<div className='line'></div>
<IonList lines='none'>
<IonListHeader>
<p>My friends</p>
</IonListHeader>
<IonItem>
<IonAvatar slot='start'>
<img src='ff-2.png' alt='avatar' />
</IonAvatar>
<IonLabel>
<h2>Isabella Garcia</h2>
<p>25 y.o. Calgary</p>
</IonLabel>
<IonIcon slot='end' icon={chatbubbleOutline} color='primary' />
</IonItem>
...
</IonList>
</IonContent>
12. Add an item with an icon and a label in IonContent
Use IonItem inside IonContent to create an interactive element. The IonItem component has the className='ion-margin-top' for spacing, lines='none' to remove divider lines, and button={true} to make it clickable.
Inside IonItem, there is an IonIcon with slot='start', meaning it appears at the beginning, an icon={personAdd} to define the displayed icon, and color='primary' to set its color.
Next, an IonLabel contains a title <h2> with the text 'Add friends by recommendation' and a description <p> with the text 'Maybe you know these people' for additional context.
<IonContent>
<IonItem className='ion-margin-top' lines='none' button={true}>
<IonIcon slot='start' icon={personAdd} color='primary' />
<IonLabel>
<h2>Add friends by recommendation</h2>
<p>Maybe you know these people</p>
</IonLabel>
</IonItem>
</IonContent>
13. Add a list with a header in IonContent
A <div> with className='line' creates a horizontal line for visual separation.
IonList is used to group related items, with lines='none' to remove divider lines between them.
Inside IonList, an IonListHeader is included, containing a <p> element with the text 'Friends requests', serving as a section title.
<IonContent>
...
<div className='line'></div>
<IonList lines='none'>
<IonListHeader>
<p>Friends requests</p>
</IonListHeader>
</IonList>
</IonContent>
14. Display a friend item with an avatar and a status
IonItem represents a single list entry. Inside, IonAvatar slot='start' contains an <img> element with src='af-1.png' and alt='avatar', displaying the user's profile image.
IonLabel holds the friend's details: <h2> displays the name 'Liam', <p> shows the username 'li.98'. Another <p> indicates the status 'in my friends'.
At the end, IonBadge with slot='end' contains the text 'Added', visually marking the user's status.
<IonContent>
...
<IonList lines='none'>
...
<IonItem>
<IonAvatar slot='start'>
<img src='af-1.png' alt='avatar' />
</IonAvatar>
<IonLabel>
<h2>Liam</h2>
<p>li.98</p>
<p>in my friends</p>
</IonLabel>
<IonBadge slot='end'>
Added
</IonBadge>
</IonItem>
</IonList>
</IonContent>
15. Display a list of friends with status indicators
Following the previous structure, this list uses IonItem to display friend entries. Each entry consists of an IonAvatar component in the slot="start", containing an <img> element that shows the profile picture.
Next to it, the IonLabel component includes an <h2> element for the name, a <p> element for the username, and an additional <p> for friends who are already added, displaying 'In my friends'.
A key difference in this implementation is the IonBadge at the end of each entry. If the friend is already added, the badge displays 'Added' without any specific color. If the friend is not yet added, it shows 'Add' with the attribute color='light', visually differentiating pending connections.
This structure maintains consistency while clearly indicating whether a friend has already been added.
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!