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.
A well-designed Sign in screen sets the tone for a seamless and user-friendly experience, making the first impression a lasting one. It's the user's first glimpse into the app's aesthetics and functionality, influencing their perception and engagement. As a fundamental aspect of the user onboarding process, an effective Sign in screen is pivotal in ensuring user satisfaction and retention.
This Sign in screen guide serves as step-by-step instruction on transforming designs, created with our Ionic Design Kit, into your app using the Ionic Framework. This walkthrough ensures a thorough understanding of the seamless fusion between design elements and code implementation within the realm of Ionic app development.
1. Install Ionic CLI with the command
Creating a project with the Ionic CLI
npm i -g @ionic/cli
2. Create a new project
Run the following command.
ionic start sign-in-form blank --type=react
3. Get inside the project directory
cd sign-in-form
4. Create the page
Create page SignIn.tsx inside src/pages and add code.
import { IonPage } from '@ionic/react';
const SignIn: React.FC = () => {
return (
<IonPage></IonPage>
);
};
export default SignIn;
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. Add header
For convenience, we will be using the layout structure recommended by Ionic for all our screens. This allows us to add header code and content inside the <IonPage></IonPage>.
<IonHeader>
<IonToolbar>
<IonTitle>Logotype</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent className='ion-padding'>
...
</IonContent>
6. Add the ion-text-center class to the IonContent component
<IonContent className='ion-padding ion-text-center'>
...
</IonContent>
This will apply styling to the content within the IonContent, providing centering the text according to Ionic's guidelines.
7. Create a line break and add a heading
Inside the IonContent component, add the <br /> tag to create a line break between components and add the IonText component within the IonContent section. Inside the IonText component, include an h1 element with the text Sign in.
<IonContent className='ion-padding ion-text-center'>
<br />
<IonText>
<h1>Sign in</h1>
</IonText>
</IonContent>
8. Add the login form
Next, within the IonContent section, add a <form> tag to encapsulate the login form.
<IonContent className='ion-padding ion-text-center'>
<br />
<IonText>
<h1>Sign in</h1>
</IonText>
<form action="#"></form>
</IonContent>
9. Organize the space for input fields
Within the form, place the IonList component with class ion-margin-bottom to organize the input fields for the login and password.
<form action="#">
<IonList className='ion-margin-bottom'>
...
</IonList>
</form>
10. Within the IonList component, include the IonItem component with the class ion-no-padding
<form action="#">
<IonList className='ion-margin-bottom'>
<IonItem className='ion-no-padding'>
...
</IonItem>
</IonList>
</form>
This utilizes IonItem with the ion-no-padding class inside IonList, allowing you to customize the styling for login and password input fields without additional padding.
11. Add email input
Inside the IonItem component, place the IonInput component for entering the email.
Add the label E-mail, set the label placement as floating, and specify the input type as email.
<IonItem className='ion-no-padding'>
<IonInput
label='E-mail'
labelPlacement='floating'
type='email'
></IonInput>
</IonItem>
This incorporates an IonInput field for entering the email with a floating label specifying E-mail and a type attribute set to email.
12. Add the password input
Within the IonList component, add another IonItem for the password input. Set the label to Password, define the label placement as floating, and specify the input type as password.
<IonItem className='ion-no-padding'>
<IonInput
label='Password'
labelPlacement='floating'
type='password'
></IonInput>
</IonItem>
13. Add the Forgot password button
After the IonList component, place an IonButton with the text 'Forgot password?' and add size='small', fill='clear', and className='ion-margin-bottom' to it.
<form action="#">
<IonList className='ion-margin-bottom'>
...
</IonList>
<IonButton size='small' fill='clear' className='ion-margin-bottom'>
Forgot password?
</IonButton>
</form>
14. Add the Sign in button
Below, position an IonButton with the text 'Sign in', setting its type as submit and adding fill='solid', expand='block', and className='ion-margin-bottom.
<IonButton
fill='solid'
expand='block'
type='submit'
className='ion-margin-bottom'
>
Sign in
</IonButton>
15. Display and style the text
Next use the IonText component to display the text 'or' in a paragraph format with a medium color.
<form action="#">
...
</form>
<IonText color='medium'>
<p>or</p>
</IonText>
16. Add Login buttons
Next, add the IonList component to organize the login buttons for Apple and Google.
<IonList className='ion-margin-bottom'></IonList>
17. Import logo icons
Use Ionicons to include logos for Apple and Google on the login buttons. Import the icons using the following.
import { logoApple, logoGoogle } from 'ionicons/icons';
18. Add the Sign in with Apple button
Inside the IonList, place an IonButton for signing in with Apple. Use the following code as a template.
<IonButton fill='outline' expand='block'>
<IonIcon slot='start' icon={ logoApple }></IonIcon>
Sign in with Apple
</IonButton>
This IonButton is configured with outline fill, expanding to the full width of its container, and includes the IonIcon for the Apple logo on the left.
19. Add the Sign in with Google button
Similarly, add the IonButton for signing in with Google below.
<IonButton fill='outline' expand='block'>
<IonIcon slot='start' icon={ logoGoogle }></IonIcon>
Sign in with Google
</IonButton>
20. Add the text component
After the IonList component, add the <br /> tag to create a line break between components and add the IonText component within the IonContent section. You can use the IonRouterLink component to navigate to another page.
<IonText color='medium'>
<p>
Don't have an account yet?
<IonRouterLink href='/sign-up'>Sign up</IonRouterLink>
</p>
</IonText>
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!