Create a Card Component
- How to import components into your application
- Learn about the usage of props
- How to use event handling
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.-
Start with importing a
Card
component into yourMyApp.jsx
file (right below the existing import statement).JavaScript / JSXCopyimport { Card } from "@ui5/webcomponents-react";
-
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 / JSXCopy<div> <Card>This is the content area of the Card</Card> </div>
Your webpage should now look like this.
And the file like this:
JavaScript / JSXCopyimport { 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 theheader
prop. Theheader
prop expects another component, theCardHeader
.Import the
CardHeader
.JavaScript / JSXCopyimport { Card, CardHeader } from "@ui5/webcomponents-react";
Add the
CardHeader
component to yourCard
and give it a title by setting thetitleText
prop:JavaScript / JSXCopy<div> <Card header={<CardHeader titleText="Card" />}> This is the content area of the Card </Card> </div>
Now the
Card
has a header area, but thefont-family
of the content area differs from theCard
header. All UI5 Web Components for React components use the same styling, this includesfont-family
,color
, etc.Add the
Text
import to yourMyApp.jsx
file.JavaScript / JSXCopyimport { Card, CardHeader, Text } from "@ui5/webcomponents-react";
And wrap the text within the
Text
component.JavaScript / JSXCopy<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 thefont-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.
-
To restrict the
width
of theCard
, add thestyle
prop.JavaScript / JSXCopy<Card header={<CardHeader titleText="Card" />} style={{ width: "300px" }}> <Text>This is the content area of the Card</Text> </Card>
-
The content of the card is way too close to the border of the
Card
, so apadding
is needed. UI5 Web Components comes with aUtil
library, which includespadding
sizes.Execute this in your terminal:
ShellCopynpm install @ui5/webcomponents-react-base --save
Then import:
JavaScript / JSXCopyimport { spacing } from "@ui5/webcomponents-react-base";
And finally add this to your
Text
component:JavaScript / JSXCopy<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 / JSXCopyimport 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:
-
- Step 4
-
The Card header can also be clickable. For this you need to set its
interactive
prop to true.JavaScript / JSXCopy<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. -
To make the header react to a click, add a function as value to the
onClick
prop.JavaScript / JSXCopy<Card header={ <CardHeader titleText="Card" interactive onClick={handleHeaderClick} /> } ... </Card>
-
Now, add the callback function right in the beginning of the component (definition function):
JavaScript / JSXCopyexport function MyApp() { const handleHeaderClick = () => { alert("Header clicked"); }; ...
The file now looks like this:
JavaScript / JSXCopyimport 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)?
-