How to create a Dashboard 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 Dashboard Screen serves as the central hub of an application, providing users with a snapshot of key information and features. It offers a convenient platform to access essential content, for instance, such as the calendar and top members, in a single view. By presenting a visually appealing and well-organized layout, the Dashboard Screen enhances user engagement and facilitates efficient navigation through the application's core functionalities.

This comprehensive guide empowers designers and developers to seamlessly integrate a user-centric Dashboard Screen into their applications. Leveraging design components from the Ionic Kit, rooted in the robust framework of the extensive Ionic library, ensures effortless integration and consistency in design, ultimately enhancing the overall usability and satisfaction of the application.

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

3. Get inside the project directory

cd dashboard-screen

4. Create a Dashboard page

Create page Dashboard.tsx inside src/pages and add code.

import { IonPage } from '@ionic/react';

const Dashboard: React.FC = () => {
 return (
   <IonPage></IonPage>
 );
};

export default Dashboard;

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 the header code

For convenience, we will be using the layout structure recommended by Ionic for our screen. This allows us to add header code and content inside the IonPage.

<IonPage>
  <IonHeader>
    <IonToolbar>...</IonToolbar>
  </IonHeader>
  <IonContent>...</IonContent>
</IonPage>

6. Add the title for this page

Inside the IonToolbar component, place the IonTitle with the text Logotype to add a title for this page.

<IonHeader>
  <IonToolbar>
    <IonTitle>Logotype</IonTitle>
  </IonToolbar>
</IonHeader>

7. Add the button

Next, after the IonTitle component, include the IonButtons component and set the slot to end. This positions the button at the end of the toolbar.

<IonToolbar>
  <IonButtons slot='end'>
  </IonButtons>
</IonToolbar>

8. Configure menu button visibility and color

Within the IonButtons component, incorporate the IonMenuButton component and set the autoHide property to {false}, ensuring the menu button remains visible even when the corresponding menu is inactive. Set the color property as dark to style button color.

<IonButtons slot='end'>
  <IonMenuButton autoHide={false} color='dark'></IonMenuButton>
</IonButtons>

9. Add and style IonContent

Next, following the IonHeader component, add the IonContent component and apply the ion-padding class to style the content within.

<IonHeader>...</IonHeader>
<IonContent className='ion-padding'></IonContent>

10. Center and customize welcome text

Inside the IonContent component, add the IonText component with the ion-text-center class to set the text alignment. Inside the IonText component, add an h1 tag with the text 'Welcome back'.

<IonContent className='ion-padding'>
  <IonText className='ion-text-center'>
    <h1>Welcome back</h1>
  </IonText>
</IonContent>

11. Add line break and button group with IonSegment

Add the <br /> tag to create a break line and place the IonSegment component to display a group of related buttons. Set the value property as 1m on the segment to match the value of a button to select that button.

<IonContent className='ion-padding'>
  ...
  <br />
  <IonSegment value='1m'>
  </IonSegment>
</IonContent>

12. Add button to IonSegment

Inside the IonSegment add the IonSegmentButton component and set the property value='24h'.

<IonSegment value='1m'>
  <IonSegmentButton value='24h'>
  </IonSegmentButton>
</IonSegment>

13. Add IonLabel to IonSegmentButton

Inside the IonSegmentButton place the IonLabel component with the text 24h.

<IonSegment value='1m'>
  <IonSegmentButton value='24h'>
    <IonLabel>24h</IonLabel>
  </IonSegmentButton>
</IonSegment>

14. Add 1-week IonSegmentButton

Repeat steps 12 and 13 to add another IonSegmentButton. Set the property value='1w' and add the text 1w inside the IonLabel.

<IonSegment value='1m'>
  ...
  <IonSegmentButton value='1w'>
    <IonLabel>1w</IonLabel>
  </IonSegmentButton>
</IonSegment>

15. Add 1-month IonSegmentButton

Repeat steps 12 and 13 to add another IonSegmentButton. Set the property value='1m' and add the text 1m inside the IonLabel.

<IonSegment value='1m'>
  ...
  <IonSegmentButton value='1m'>
    <IonLabel>1m</IonLabel>
  </IonSegmentButton>
</IonSegment>

16. Add 1-year IonSegmentButton

Repeat steps 12 and 13 to add another IonSegmentButton. Set the property value='1y' and add the text 1y inside the IonLabel.

<IonSegment value='1y'>
  ...
  <IonSegmentButton value='1y'>
    <IonLabel>1y</IonLabel>
  </IonSegmentButton>
</IonSegment>

17. Add IonDatetime component

Place the IonDatetime component with the ion-margin-vertical class. Set the size property to cover and the hourCycle property to h12 to style the component. To set the selected date and time, use the attribute value='2024-06-14T13:02:00'. Ionic uses the ISO 8601 datetime format for its value.

<IonContent className='ion-padding'>
  ...
  <IonDatetime
    className='ion-margin-vertical'
    size='cover'
    value='2024-06-14T13:02:00'
    hourCycle='h12'
  ></IonDatetime>
</IonContent>

18. Add IonItem component

Add the IonItem component with the ion-no-padding class and set the property lines='none'.

<IonContent className='ion-padding'>
  ...
  <IonItem lines='none' className='ion-no-padding'>
  </IonItem>
</IonContent>

19. Add IonLabel

Within the IonItem add the IonLabel component with an h2 tag and place the text 'Top members' inside.

<IonItem lines='none' className='ion-no-padding'>
  <IonLabel>
    <h2>Top members</h2>
  </IonLabel>
</IonItem>

20. Add IonIcon for styling

After the IonLabel add the IonIcon component with the properties icon={ellipsisVertical} to style the component, using the icon from Ionic icons.

<IonItem lines='none' className='ion-no-padding'>
  ...
  <IonIcon icon={ellipsisVertical}></IonIcon>
</IonItem>

21. Add IonList component

After the IonItem add the IonList component with the property lines='none' to style the content inside. This component helps organize the items inside.

<IonContent className='ion-padding'>
  ...
  <IonList lines='none'></IonList>
</IonContent>

22. Add IonItem inside IonList

Inside the IonList component, add the IonItem component.

<IonList lines='none'>
  <IonItem></IonItem>
</IonList>

23. Include IonAvatar component

Within the IonItem, add the IonAvatar component with the properties aria-hidden='true' and slot='start' to improve the page semantics and style the content inside. Add the img tag to place the user avatar.

<IonItem>
  <IonAvatar aria-hidden='true' slot='start'>
    <img src={user1} alt="avatar" />
  </IonAvatar>
</IonItem>

24. Add user information label

Add the IonLabel component to place additional information about the user. Inside the IonLabel, place h2 and p tags with the text 'Phoenix Brown' and 'Member since Feb 2022', respectively.

<IonItem>
  ...
  <IonLabel>
    <h2>Phoenix Brown</h2>
    <p>Member since Feb 2022</p>
  </IonLabel>
</IonItem>

25. Add second user

Repeat steps from 22 and 24 to add another IonItem. Set the src={user2} for the user avatar and the text 'Lana Steiner' and 'Member since Jan 2022' inside the IonLabel.

<IonList lines='none'>
  …
  <IonItem>
    <IonAvatar aria-hidden='true' slot='start'>
      <img src={user2} alt="avatar" />
    </IonAvatar>
    <IonLabel>
      <h2>Lana Steiner</h2>
      <p>Member since Jan 2022</p>
    </IonLabel>
  </IonItem>
</IonList>

26. Add third user

Repeat steps from 22 and 24 to add another IonItem. Set the src={user3} for the user avatar and the text 'Demi Wikinson' and 'Member since Mar 2022' inside the IonLabel.

<IonList lines='none'>
  …
  <IonItem>
    <IonAvatar aria-hidden='true' slot='start'>
      <img src={user3} alt="avatar" />
    </IonAvatar>
    <IonLabel>
      <h2>Demi Wikinson</h2>
      <p>Member since Mar 2022</p>
    </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!