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 Error Screen is a critical element in user interface design, serving as a communication tool between the application and its users when something goes wrong. Its primary function is to inform users of errors, guiding them to understand the issue and, if possible, how to resolve it. By presenting a clear and concise interface, the Error Screen minimizes user frustration and enhances the overall user experience, even during unforeseen disruptions.
This guide aims to offer a detailed overview, enabling designers and developers to effortlessly integrate an effective Error Screen Page into their Ionic applications. The integration is simplified by using design components from the Ionic Kit, which is built upon the solid foundation of the extensive Ionic 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 error-screen blank --type=react
3. Get inside the project directory
cd error-screen
4. Create a new page
Create page Error.tsx inside src/pages and add code.
import { IonPage } from '@ionic/react';
const Error: React.FC = () => {
return (
<IonPage></IonPage>
);
};
export default Error;
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. Structure the layout
For convenience, we will be using the layout structure recommended by Ionic for our screen. This allows us to add content inside the <IonPage></IonPage>.
<IonPage>
<IonContent className='ion-padding'>
</IonContent>
</IonPage>
6. Set the style and add the h5 text
Inside the IonContent component, add a <div> tag with the style height: 70px to create a space between components and add the IonText component within the IonContent section. Set the color='primary' attribute. Inside the IonText component, include an h5 element with the text '404 error'.
<IonContent className='ion-padding ion-text-center'>
<div style={{height: '48px'}}></div>
<IonText color='primary'>
<h5>404 error</h5>
</IonText>
</IonContent>
7. Add 'We can't find that page' text component
After that add one more IonText component. Inside the IonText component, include an h1 element with the text 'We can’t find that page'.
<IonContent className='ion-padding ion-text-center'>
...
<IonText>
<h1>We can’t find that page</h1>
</IonText>
</IonContent>
8. Place the text below h1
Next, add another IonText component with the color='medium' attribute to define the color of the text inside. Inside the IonText component, include an p element with the text 'Sorry, the page you are looking for doesn't exist or has been moved.'.
<IonContent className='ion-padding ion-text-center'>
...
<IonText color='medium'>
<p>
Sorry, the page you are looking for doesn't exist or has been moved.
</p>
</IonText>
</IonContent>
9. Add the IonList component to organize the buttons inside
<IonContent className='ion-padding ion-text-center'>
...
<IonList>
</IonList>
</IonContent>
10. Add Home Button
Inside the IonList component include the IonButton component with the expand='block' attribute. Place the text 'Take me home' inside.
<IonList>
<IonButton expand='block'>Take me home</IonButton>
</IonList>
11. Import the icon for the button
Use Ionicons to include an icon for the button. Import the icon using the following.
import { arrowBack } from 'ionicons/icons';
12. Inside the IonList, place one more IonButton
Use the following code as a template.
<IonList>
...
<IonButton expand='block' fill='outline'>
<IonIcon slot='start' icon={arrowBack}></IonIcon>
Go back
</IonButton>
</IonList>
This IonButton is configured with outline fill, expanding to the full width of its container, and includes the IonIcon on the left.
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!