How to create a Recipe details 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 Recipe Details Screen is a key feature in cooking, meal-planning, and lifestyle apps, giving users a clear view of a dish’s ingredients, preparation steps, and images. A well-designed recipe screen includes ingredient lists with quantities, step-by-step cooking instructions, timers, and high-quality food images to make the cooking process enjoyable and easy to follow. Optional features like nutritional facts and serving size adjustments can further enhance usability.

This guide will walk you through the steps to design and implement a Recipe Details Screen using the Ionic Design Kit. By leveraging its ready-to-use UI components and the Ionic Framework, you can create an attractive, intuitive, and mouthwatering recipe interface that keeps users inspired in the kitchen.

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

3. Get inside the project directory

cd recipe-details

4. Create a Recipe details page

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

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

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

export default RecipeDetails;

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>
  <IonImg src={/* recipe image */} />
  <IonContent>
  ... 
  </IonContent>
</IonPage>

6. Import components and assets

At the top of your file, import all required components from Ionic and any assets needed for the recipe display.

import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonButtons,
  IonButton,
  IonIcon,
  IonContent,
  IonText,
  IonGrid,
  IonRow,
  IonCol,
  IonImg,
  IonChip,
  IonLabel,
} from '@ionic/react';
import { arrowBack, bookmarkOutline } from 'ionicons/icons';
import tacos from '../assets/images/tacos.jpg'

Make sure to place your recipe image in the correct assets folder and import it as shown above.

7. Add header with navigation and bookmark buttons

Inside the IonToolbar, place navigation buttons at both ends. Add IonButtons with slot="start" containing a back button with the arrow icon. On the right side, add another IonButtons with slot="end" containing a bookmark button using the bookmarkOutline icon. These buttons allow users to navigate back and save recipes as favorites.

<IonHeader>
  <IonToolbar>
    <IonButtons slot='start'>
      <IonButton>
        <IonIcon icon={arrowBack} />
      </IonButton>
    </IonButtons>
    <IonButtons slot='end'>
      <IonButton>
        <IonIcon icon={bookmarkOutline} />
      </IonButton>
    </IonButtons>
  </IonToolbar>
</IonHeader>

8. Display the recipe image

Below the header, add a full-width image of the recipe using the IonImg component. This component automatically sizes the image to fit the width of the container while maintaining its aspect ratio. The recipe image is an important visual element that helps users identify the dish and provides appetite appeal.

<IonImg src={tacos} />

9. Add recipe title and description

Inside the IonContent, add padding with className="ion-padding" and include title and description elements. Use IonText with an <h3> tag for the recipe title and add bottom margin with className="ion-margin-bottom". Below that, add another IonText component with a brief description of the recipe. This provides users with the dish name and a quick overview.

<IonContent className='ion-padding'>
  <IonText>
    <h3 className='ion-margin-bottom'>Shrimp tacos</h3>
  </IonText>
  <IonText className='ion-margin-bottom'>
    Quick & zesty seafood tacos with fresh veggies
  </IonText>
</IonContent>

10. Add meal type tags

Include meal type categorization using IonChip components with outline={true} to create bordered tags. Set className='ion-margin-vertical' to add vertical spacing. These chips help users quickly identify suitable meal occasions for the recipe.

<IonChip outline={true} className='ion-margin-vertical'>Dinner</IonChip>
<IonChip outline={true} className='ion-margin-vertical'>Lunch</IonChip>

11. Show nutrition information

Create a nutrition section with an <h5> heading inside an IonText component. Set both className='ion-margin-bottom' and inline style style={{ marginTop: '8px' }} for proper spacing. Below the heading, add an IonGrid with className='ion-no-padding' containing a row of nutritional values. Each nutrition fact is displayed in a separate column using IonCol with size='3' to create four equal columns.

<IonText>
  <h5 className='ion-margin-bottom' style={{ marginTop: '8px' }}>
    Nutrition per serving
  </h5>
</IonText>
<IonGrid className='ion-no-padding'>
  <IonRow>
    {Array.from({ length: 4 }).map((_, index) => {
      const values = [
        "320 kcal",
        "22 g",
        "28 g",
        "12 g",
      ];
      const titles = [
        "Calories",
        "Protein",
        "Carbs",
        "Fat"
      ]
      return (
        <IonCol key={index} size='3' className='ion-text-center'>
          <IonLabel>
            <h2>{values[index]}</h2>
            <p>{titles[index]}</p>
          </IonLabel>
        </IonCol>
      )
    })}
  </IonRow>
</IonGrid>

This code maps over an array of length 4 to create four columns, each displaying a nutritional value and its corresponding title. The values and titles are stored in separate arrays and accessed by index.

12. List the ingredients

Finally, add an ingredients section with an <h5> heading inside an IonText component, using style={{ marginTop: '24px' }} to create space above it. Below the heading, create an unordered list (<ul>) inside another IonText component, with each ingredient as a list item (<li>). This provides a clear, structured list of everything needed to prepare the dish.

<IonText>
  <h5 style={{ marginTop: '24px' }}>
    Ingredients
  </h5>
</IonText>
<IonText>
  <ul>
    <li>200 g medium shrimp, peeled & deveined</li>
    <li>4 small corn tortillas</li>
    <li>½ small red onion, thinly sliced</li>
    <li>½ cup shredded purple cabbage</li>
    <li>1 small avocado, sliced</li>
    <li>Fresh cilantro leaves</li>
    <li>1 lime, cut into wedges</li>
    <li>1 tbsp olive oil</li>
    <li>1 tsp smoked paprika</li>
    <li>Salt & pepper to taste</li>
  </ul>
</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!