How to create an Investment portfolio 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 Investment Portfolio Screen is an essential feature in fintech, trading, and wealth management apps, providing users with a comprehensive overview of their investments across stocks, cryptocurrencies, and mutual funds. A well-designed portfolio interface includes asset allocation charts, performance trends, real-time price updates, profit/loss indicators, and diversification insights. This empowers users to track their investments, monitor growth, and make informed decisions.

This guide will walk you through the steps to design and implement an Investment Portfolio Screen using the Ionic Design Kit. By leveraging its versatile UI components and the Ionic Framework, you can create a sleek, data-rich, and user-friendly portfolio dashboard that enhances financial visibility and decision-making.

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

3. Get inside the project directory

cd investment-portfolio

4. Create an Investment portfolio page

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

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

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

export default InvestmentPortfolio;

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. Build header with action icons

Use IonPage as the root wrapper for the screen. Inside IonHeader, place IonToolbar for a top bar layout. Use IonButtons slot='end' to position multiple action buttons on the right. Add two IonButton components, each containing an IonIcon for "gift" and "settings", representing quick access actions.

<IonHeader>
    <IonToolbar>
        <IonButtons slot='end' className='ion-padding-end'>
            <IonButton>
                <IonIcon icon={giftOutline} />
            </IonButton>
            <IonButton>
                <IonIcon icon={settingsOutline} />
            </IonButton>
        </IonButtons>
    </IonToolbar>
</IonHeader>

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

7. Display user info row

Inside IonContent, use IonItem with lines='none' to display user information without a divider. Place IonAvatar in the slot='start' to show the user’s profile image. Use IonLabel to show the user name and IonNote to display the account balance. This row serves as the profile header.

...
<IonContent className='ion-padding-top'>
    <IonItem lines='none'>
        <IonAvatar slot='start'>
            <img src="avatar-invest.png" alt="user avatar" />
        </IonAvatar>
        <IonLabel>
            Daniel Smith
        </IonLabel>
        <IonNote>
            $600.00
        </IonNote>
    </IonItem>
</IonContent>

8. Create deposit and invest buttons

Use IonGrid for layout and spacing, and add two IonCol inside a row IonRow. Inside each column, place an IonButton with fill="outline" and expand="block" to create two full-width outlined buttons labeled 'Deposit' and 'Invest'.

<IonContent className='ion-padding-top'>
    ...
    <IonGrid className='ion-padding-start ion-padding-end'>
        <IonRow>
            <IonCol>
                <IonButton fill="outline" expand="block">
                    Deposit
                </IonButton>
            </IonCol>
            <IonCol>
                <IonButton fill="outline" expand="block">
                    Invest
                </IonButton>
            </IonCol>
        </IonRow>
    </IonGrid>
</IonContent>

9. Show buying power item

Create another IonItem with lines='none', button, and detail attributes to make it interactive. Use IonLabel slot='start' for the 'Buying power' title and IonNote slot='end' to display the dollar amount on the right side. The detail attribute adds a right-pointing indicator arrow.

<IonContent className='ion-padding-top'>
    ...
    <IonItem lines='none' button detail className='ion-margin'>
        <IonLabel slot='start'>
            Buying power
        </IonLabel>
        <IonNote slot='end'>
            $560.00
        </IonNote>
    </IonItem>
</IonContent>

10. Insert portfolio section header

Add a non-clickable IonItem with lines='none'. On the left, use IonLabel for the 'Portfolio' title. On the right, place an IonChip with outline={true} and a slot='end' to display the filter selector. Inside the chip, include an IonIcon and IonLabel to describe the current filter mode, such as 'All time gain'.

<IonContent className='ion-padding-top'>
    ...
    <IonItem lines='none'>
        <IonLabel slot='start'>
            Portfolio
        </IonLabel>
        <IonChip outline={true} slot='end'>
            <IonIcon icon={filter} />
            <IonLabel>
                All time gain
            </IonLabel>
        </IonChip>
    </IonItem>
</IonContent>

11. Build investment card block

Create a <div> container styled as a card. Inside, use a clickable IonItem with a custom detailIcon. Add a IonThumbnail slot='start' for the asset icon. Use IonLabel to show the asset name and category, and IonNote for the percentage gain. Below, create an IonList of multiple IonItem rows showing asset details like 'Gain/Loss', 'Holdings', 'Owned', 'Average price', 'Weighting', and 'Invested time', with IonNote for values. Finally, add a IonGrid with two columns and two IonButton labeled 'Sell' and 'Buy'.

<IonContent className='ion-padding-top'>
    ...
    <div className='card ion-margin-start ion-margin-end'>
        <IonItem button lines='none' detail detailIcon={chevronUp}>
            <IonThumbnail slot='start'>
                <img src="invest-pic.png" alt="image" />
            </IonThumbnail>
            <IonLabel>
                <h2>
                    XXX 25
                </h2>
                <p>
                    25 index
                </p>
            </IonLabel>
            <IonNote>
                +4.55%
            </IonNote>
        </IonItem>
        <IonList lines='none'>
            <IonItem>
                <IonLabel>
                    Gain/Loss
                </IonLabel>
                <IonNote>
                    $1.24
                </IonNote>
            </IonItem>
            <IonItem>
                <IonLabel>
                    Total holdings
                </IonLabel>
                <IonNote>
                    $46.18
                </IonNote>
            </IonItem>
            <IonItem>
                <IonLabel>
                    Owned
                </IonLabel>
                <IonNote>
                    0.7621 shares
                </IonNote>
            </IonItem>
            <IonItem>
                <IonLabel>
                    Average price
                </IonLabel>
                <IonNote>
                    $378.34/share
                </IonNote>
            </IonItem>
            <IonItem>
                <IonLabel>
                    Weighting
                </IonLabel>
                <IonNote>
                    34.18% of portfolio
                </IonNote>
            </IonItem>
            <IonItem>
                <IonLabel>
                    Invested for
                </IonLabel>
                <IonNote>
                    165 days
                </IonNote>
            </IonItem>
        </IonList>
        <IonGrid>
            <IonRow>
                <IonCol>
                    <IonButton size='small' expand="block">
                        Sell
                    </IonButton>
                </IonCol>
                <IonCol>
                    <IonButton size='small' expand="block">
                        Buy
                    </IonButton>
                </IonCol>
            </IonRow>
        </IonGrid>
    </div>
</IonContent>

Add IonFooter and include IonTabBar slot='bottom' to create a fixed bottom navigation. Inside, define three IonTabButton components for 'Community', 'Portfolio', and 'Recipients'. Each includes an IonIcon and IonLabel. Highlight the active tab 'Portfolio' by adding color='primary' to both icon and label.

<IonFooter>
    <IonTabBar slot='bottom'>
        <IonTabButton tab="community" href="#">
            <IonIcon icon={peopleOutline} />
            <IonLabel>
                Community
            </IonLabel>
        </IonTabButton>
        <IonTabButton tab="portfolio" href="#">
            <IonIcon icon={briefcaseOutline} color='primary' />
            <IonLabel color="primary">
                Portfolio
            </IonLabel>
        </IonTabButton>
        <IonTabButton tab="recipients" href="#">
            <IonIcon icon={searchCircleOutline} />
            <IonLabel>
                Recipients
            </IonLabel>
        </IonTabButton>
    </IonTabBar>
</IonFooter>

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!