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 Friend Requests Screen is a key feature in social networking apps, gaming platforms, and community-driven applications. It enables users to manage incoming and outgoing friend requests, fostering connections and engagement. A well-designed Friend Requests Screen ensures a smooth user experience by providing clear request statuses, easy accept/decline actions, and organized contact management.
This guide will walk you through the steps to design and implement a Friend Requests Screen using the Ionic Design Kit. By leveraging its design elements and the Ionic Framework, you can create an intuitive, responsive, and visually appealing interface that enhances user interaction and social connectivity.
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 requests blank --type=react
3. Get inside the project directory
cd requests
4. Create a Tab bar component
Use this instruction to create a Tab bar component.
5. Create a Friend requests page
Create page FriendRequests.tsx inside src/pages and add code.
import { IonPage } from '@ionic/react';
const FriendRequests: React.FC = () => {
return (
<IonPage></IonPage>
);
};
export default FriendRequests;
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 text='' defaultHref='#' icon={arrowBack} />
</IonButtons>
</IonToolbar>
</IonHeader>
8. Put the title on top of the page
Place the IonTitle with the text 'Add friends' to add a title for this page.
<IonHeader>
<IonToolbar>
<IonButtons slot='start' className='ion-padding-start'>
<IonBackButton text='' defaultHref='#' icon={arrowBack} />
</IonButtons>
<IonTitle>Add friends</IonTitle>
</IonToolbar>
</IonHeader>
This concludes our work with IonHeader, and the following sections will cover working with IonContent.
9. 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>
<IonButtons slot='start' className='ion-padding-start'>
<IonBackButton text='' defaultHref='#' icon={arrowBack} />
</IonButtons>
<IonTitle>Add friends</IonTitle>
</IonToolbar>
<IonToolbar>
<IonSearchbar placeholder='Search' />
</IonToolbar>
</IonHeader>
10. Add an item with an icon and 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>
11. 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>
12. Display a friend item with an avatar and 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>
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!