Skip to Content

Create a Card Component

Beginner
15 min.
Define your first component using UI5 Web Components for React.
You will learn
  • How to import components into your application
  • Learn about the usage of props
  • How to use event handling
Lukas742Lukas HarbarthAugust 8, 2022
Created by
Lukas742
December 5, 2019

Integrate the first component into your App. You can find all available components in the Storybook.
There you can try out the different components and also take a look at the coding and the available props.

  • Step 1

    First you need to import the components you want to use.

    You can check out all available components in the Storybook. Take your time to play around a little, change some props and take a look at the coding.

    1. For the sake of keeping the coding as short as possible, this tutorial will only use direct imports. Start with importing a Card component into your MyApp.jsx file (right below the existing import statement).

      JavaScript / JSX
      Copy
      import { Card } from "@ui5/webcomponents-react";
      
    2. So, you imported the Card component. Now it’s time to use it. Replace the content of your <div> with a <Card>.

      In the Storybook, you can see that Cards can receive different props. For now only add some text as children.

      JavaScript / JSX
      Copy
      <div>
        <Card>This is the content area of the Card</Card>
      </div>
      

    Your webpage should now look like this.

    Card01

    And the file like this:

    JavaScript / JSX
    Copy
    import { Card } from "@ui5/webcomponents-react";
    
    export function MyApp() {
      return (
        <div>
          <Card>This is the content area of the Card</Card>
        </div>
      );
    }
    
  • Step 2

    The heading area of the Card component is empty, this is because it didn’t receive the header prop. The header prop expects another component, the CardHeader.

    1. Import the CardHeader.

      JavaScript / JSX
      Copy
      import { Card, CardHeader } from "@ui5/webcomponents-react";
      
    2. Add the CardHeader component to your Card and give it a title by setting the titleText prop:

      JavaScript / JSX
      Copy
      <div>
        <Card header={<CardHeader titleText="Card" />}>
          This is the content area of the Card
        </Card>
      </div>
      
    3. Now the Card has a header area, but the font-family of the content area differs from the Card header. All UI5 Web Components for React components use the same styling, this includes font-family, color, etc.

      Add the Text import to your MyApp.jsx file.

      JavaScript / JSX
      Copy
      import { Card, CardHeader, Text } from "@ui5/webcomponents-react";
      

      And replace the inner div with the Text component.

      JavaScript / JSX
      Copy
      <div>
        <Card header={<CardHeader titleText="Card" />}>
          <Text>This is the content area of the Card</Text>
        </Card>
      </div>
      

    The font-family of the content now corresponds to the font-family of the header.

  • Step 3

    In this step, we will only apply inline-styling. You can also style your component using normal CSS or even authoring tools like JSS, but this will be covered in Tutorial 6 of the tutorial series.

    The Card now spreads across the whole screen, this behavior is intended so it takes up the whole space of its container.

    1. To restrict the width of the Card, add the style prop.

      JavaScript / JSX
      Copy
      <Card header={<CardHeader titleText="Card" />} style={{ width: "300px" }}>
        <Text>This is the content area of the Card</Text>
      </Card>
      
      Card02
    2. The content of the card is way too close to the border of the Card, so a padding is needed. UI5 Web Components comes with a Util library, which includes padding sizes.

      Execute this in your terminal:

      Shell
      Copy
      npm install @ui5/webcomponents-react-base --save
      

      Then import:

      JavaScript / JSX
      Copy
      import { spacing } from "@ui5/webcomponents-react-base";
      

      And finally add this to your Text component:

      JavaScript / JSX
      Copy
      <Text style={spacing.sapUiContentPadding}>
        This is the content area of the Card
      </Text>
      

      Hereby you get a standardized content-padding. spacing comes with many more properties, feel free to test them and see what they do.

    After this step MyApp.jsx should look like this:

    JavaScript / JSX
    Copy
    import React from "react";
    import { Card, Text, CardHeader } from "@ui5/webcomponents-react";
    import { spacing } from "@ui5/webcomponents-react-base";
    
    export function MyApp() {
      return (
        <div>
          <Card header={<CardHeader titleText="Card" />} style={{ width: "300px" }}>
            <Text style={spacing.sapUiContentPadding}>
              This is the content area of the Card
            </Text>
          </Card>
        </div>
      );
    }
    

    And your application like this:

    Card03
  • Step 4
    1. The Card header can also be clickable. For this you need to set its interactive prop to true.

      JavaScript / JSX
      Copy
      <Card
        header={<CardHeader titleText="Card" interactive />}
        ...
      </Card>
      

      We didn’t pass a value to interactive, because it defaults to true if the value is omitted.

    2. To make the header react to a click, add a function as value to the onClick prop.

      JavaScript / JSX
      Copy
      <Card
        header={
          <CardHeader
            titleText="Card"
            interactive
            onClick={handleHeaderClick}
          />
        }
        ...
      </Card>
      
    3. Now, add the callback function right in the beginning of the component (definition function):

      JavaScript / JSX
      Copy
      export function MyApp() {
        const handleHeaderClick = () => {
          alert("Header clicked");
      };
      

    The file now looks like this:

    JavaScript / JSX
    Copy
    import React from "react";
    import { Card, Text, CardHeader } from "@ui5/webcomponents-react";
    import { spacing } from "@ui5/webcomponents-react-base";
    
    export function MyApp() {
      const handleHeaderClick = () => {
        alert("Header clicked");
      };
      return (
        <div>
          <Card
            header={
              <CardHeader
                titleText="Card"
                interactive
                onClick={handleHeaderClick}
              />
            }
            style={{ width: "300px" }}
          >
            <Text style={spacing.sapUiContentPadding}>
              This is the content area of the Card
            </Text>
          </Card>
        </div>
      );
    }
    

    Now the header opens an alert box on click.

    What syntax should be used when handling events of a React component (JSX)?

Back to top