How to create an Invoice 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 Invoice Screen is a crucial feature in finance, billing, and e-commerce applications. It allows users to view detailed invoices, track payments, and manage transactions efficiently. A well-designed Invoice Screen enhances the user experience by providing clear invoice breakdowns, due dates, and payment status. Adding download and sharing options ensures users can easily save and distribute invoices, improving accessibility and convenience.

This guide will walk you through the steps to design and implement an Invoice Screen using the Ionic Design Kit. By leveraging its design elements and the Ionic Framework, you can create a clean, organized, and functional invoice interface with seamless download and sharing capabilities.

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

3. Get inside the project directory

cd invoice

4. Create an Invoice page

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

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

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

export default Invoice;

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. 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>

6. 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 {chevronBack}. Ensure that {chevronBack} has been imported correctly from Ionic icons.

import { chevronBack, shareOutline } from "ionicons/icons";
...
<IonHeader>
    <IonToolbar>
        <IonButtons slot='start' className='ion-padding-start'>
            <IonBackButton defaultHref='#' text='' icon={chevronBack} />
        </IonButtons>
    </IonToolbar>
</IonHeader>

7. Put the title on top of the page

Place the IonTitle with the text 'invoice' to add a title for this page.

<IonHeader>
    <IonToolbar>
        <IonButtons slot='start' className='ion-padding-start'>
            <IonBackButton defaultHref='#' text='' icon={chevronBack} />
        </IonButtons>
        <IonTitle>
            Invoice
        </IonTitle>
    </IonToolbar>
</IonHeader>

This concludes our work with IonHeader, and the following sections will cover working with IonContent.

8. Organize the list of items

Within the IonContent section with lines to none, place the IonList. Additionally, add the className='ion-padding-top' to the IonContent component to ensure that the content inside has proper spacing from the top of the screen. This helps improve readability and prevents elements from being too close to the device's status bar or header.

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

9. Add an IonItem to the list

To include an item in the list, use the IonItem component within the IonList. Each IonItem can contain various elements, such as labels and notes, to display relevant information. In this example, the IonItem contains an IonLabel, which holds the value #563219, and an IonNote, which provides additional context by labeling it as Number. This structure helps organize the content in a clear and readable way.

<IonContent className='ion-padding-top'>
    <IonList lines='none'>
        <IonItem>
            <IonLabel>#563219</IonLabel>
            <IonNote>Number</IonNote>
        </IonItem>
</IonContent>

10. Add multiple IonItem components

Following the same structure as the previous example, additional IonItem components should be included within the IonList. Each IonItem consists of an IonLabel displaying a specific value and an IonNote providing context for that value. By applying this pattern, all necessary items, such as Amount, Status, Created, Finalized, Owner, Customer, Source, and Description, are properly organized within the list, ensuring a clear and structured presentation of the data.

<IonContent className='ion-padding-top'>
    <IonList lines='none'>
        <IonItem>
            <IonLabel>#563219</IonLabel>
            <IonNote>Number</IonNote>
        </IonItem>
        <IonItem>
            <IonLabel>$250</IonLabel>
            <IonNote>Amount</IonNote>
        </IonItem>
        <IonItem>
            <IonLabel>Paid</IonLabel>
            <IonNote>Status</IonNote>
        </IonItem>
        <IonItem>
            <IonLabel>Jun 19, 2024 at 11:56 AM</IonLabel>
            <IonNote>Created</IonNote>
        </IonItem>
        <IonItem>
            <IonLabel>Jun 19, 2024 at 8:24 PM</IonLabel>
            <IonNote>Finalized</IonNote>
        </IonItem>
        <IonItem>
            <IonLabel>James Whitaker</IonLabel>
            <IonNote>Owner</IonNote>
        </IonItem>
        <IonItem>
            <IonLabel>Emily Thompson</IonLabel>
            <IonNote>Customer</IonNote>
        </IonItem>
        <IonItem>
            <IonLabel>Card</IonLabel>
            <IonNote>Source</IonNote>
        </IonItem>
        <IonItem>
            <IonLabel> - </IonLabel>
            <IonNote>Description</IonNote>
        </IonItem>
    </IonList>
</IonContent>

11. Add a section for card details

Following the same structure as the previous example, additional elements should be included to maintain consistency in styling and layout. The div with the class line serves as a separator, visually distinguishing sections. The IonText component contains a heading wrapped in an h4 element with the ion-padding-start class, ensuring proper spacing. This pattern can be extended to other sections requiring similar formatting, maintaining a structured and visually appealing layout.

<IonContent className='ion-padding-top'>
    ...
    <div className='line'></div>
    <IonText>
        <h4 className='ion-padding-start'>
            Card details
        </h4>
    </IonText>
</IonContent>

12. Add a list for card information

Following the same structure as previous examples, additional IonItem elements should be included within the IonList to maintain a consistent format for displaying card details. Each IonItem contains an IonLabel for the main information, such as the cardholder's name, masked card number, expiration date, and CVC, with an accompanying IonNote providing context. This approach ensures a clear and structured display of payment information while maintaining proper styling and readability.

<IonContent className='ion-padding-top'>
    ...
    <IonList lines='none'>
        <IonItem>
            <IonLabel>James Whitaker</IonLabel>
            <IonNote>Name on card</IonNote>
        </IonItem>
        <IonItem>
            <IonLabel>···· ···· ···· 6598</IonLabel>
            <IonNote>Card number</IonNote>
        </IonItem>
        <IonItem>
            <IonLabel>06/27</IonLabel>
            <IonNote>Expiry</IonNote>
        </IonItem>
        <IonItem>
            <IonLabel>···</IonLabel>
            <IonNote>CVC</IonNote>
        </IonItem>
    </IonList>
</IonContent>

13. Add action buttons

Following the same structure as previous examples, additional IonButton elements can be included within the div with the class btn-box to provide user actions such as sharing and downloading. The first IonButton uses the fill='outline' property and contains an IonIcon with the shareOutline icon, indicating a sharing function. The second IonButton is a standard button labeled Download. This approach ensures a consistent and user-friendly interface for performing.

<IonContent className='ion-padding-top'>
    ...
    <div className='btn-box'>
        <IonButton fill='outline'>
            <IonIcon slot='start' icon={shareOutline}></IonIcon>
            Share
        </IonButton>
        <IonButton>Download</IonButton>
    </div>
</IonContent>

Thank you for joining us on this exciting journey thus far. Stay tuned for more guides in our comprehensive series, where we'll explore 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!