Skip to content

first batch of tutorial fixes for dev garage #24262

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jung-thomas merged 2 commits into from
Oct 25, 2026
+161 −161
Merged

first batch of tutorial fixes for dev garage #24262

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
de5eec1
first batch of tutorial fixed for dev garage
nicoschoenteich Oct 24, 2026
7195c9d
more fixes for the dev garage
nicoschoenteich Oct 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
178 changes: 92 additions & 86 deletions tutorials/ui5-webcomponents-react-card/ui5-webcomponents-react-card.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,63 +11,67 @@ author_profile: https://github.com/Lukas742
# Create a Card Component
<!-- description --> Define your first component using UI5 Web Components for React.

## Prerequisites

- Complete the tutorial [Get Started with UI5 Web Components for React](ui5-webcomponents-react-introduction).

## You will learn
- How to import components into your application
- How to import UI5 Web Components into your application
- Learn about the usage of props
- How to use event handling


## Intro
Integrate the first component into your App. You can find **all** available components in the [Storybook](https://ui5.github.io/webcomponents-react).
You will now integrate the first UI5 Web Component into your App. You can find **all** available UI5 Web Components for React in the [Storybook](https://sap.github.io/ui5-webcomponents-react).
There you can try out the different components and also take a look at the coding and the available props.

---

### Add components to MyApp.tsx
### Add the Card component to MyApp.tsx

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

You can check out all available components in the [Storybook](https://ui5.github.io/webcomponents-react). Take your time to play around a little, change some `props` and take a look at the coding.
You can check out all available components in the [Storybook](https://sap.github.io/ui5-webcomponents-react). Take your time to play around a little, change some `props` and take a look at the coding.

1. Start with importing a `Card` component into your `MyApp.tsx` file.

```TypeScript / TSX
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>`.
```TypeScript / TSX
import { Card } from "@ui5/webcomponents-react";
```

In the [Storybook](https://ui5.github.io/webcomponents-react/v2/?path=/docs/data-display-card--docs), you can see that Cards can receive different props. For now only add some text as `children`.

```TypeScript / TSX
<div>
<Card>This is the content area of the Card</Card>
</div>
```
2. Now it's time to use the `Card` component. Replace the content of your `MyApp` function with the following code.

Your webpage should now look like this.
```TypeScript / TSX
return (
<div>
<Card>This is the content area of the Card</Card>
</div>
);
```

![Card01](01_card.png)
> For now, the `Card` only contains some text as `children`, but in the [Storybook](https://sap.github.io/ui5-webcomponents-react/?path=/story/4-ui5-web-components-card--default-story), you can see that a `Card` can receive many props.

And the file like this:
Your webpage should now look like this:

```TypeScript / TSX
import { Card } from "@ui5/webcomponents-react";
![Card01](01_card.png)

export function MyApp() {
return (
<div>
<Card>This is the content area of the Card</Card>
</div>
);
}
```
Your `MyApp.tsx` file should now look like this :

```TypeScript / TSX
import { Card } from "@ui5/webcomponents-react";

export function MyApp() {
return (
<div>
<Card>This is the content area of the Card</Card>
</div>
);
}
```

### Add content to the Card component

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`.
The heading area of the `Card` component is empty, this is because it didn't receive the `header` prop. The `header` prop itself expects another component, the `CardHeader`.

1. Import the `CardHeader`.

Expand All @@ -85,8 +89,7 @@ The heading area of the `Card` component is empty, this is because it didn't rec
</div>
```

3. Our template applies the SAP defined `font-family` for all texts that don't implement `font-family` themselves. (see `index.css` file)
To enable this on a single text without using CSS, you can use the `Text` component. Let's wrap the text content of the `Card` inside the `Text` component:
3. Our application already applies the SAP defined `font-family` for all texts that don't implement `font-family` themselves via the `index.css` file, which is why the inner text already has the right font. However, to enable this on a single text without using CSS, you can use the `Text` component. Let's wrap the text content of the `Card` inside the `Text` component:

```TypeScript / TSX
import { Card, CardHeader, Text } from "@ui5/webcomponents-react";
Expand All @@ -100,14 +103,11 @@ The heading area of the `Card` component is empty, this is because it didn't rec
</div>
```



### Style your component

In this step, we will only apply [inline-styling](https://reactjs.org/docs/dom-elements.html#style).
You can also style your component using CSS ([modules](https://github.com/css-modules/css-modules)), but this and many more information regarding the styling approach of UI5 Web Components (for React) will be covered in [chapter six](ui5-webcomponents-react-styling) of the tutorial series.
In this step, we will only apply [inline-styling](https://reactjs.org/docs/dom-elements.html#style). You can also style your component using CSS ([modules](https://github.com/css-modules/css-modules)), but this and many more information regarding the styling approach of UI5 Web Components (for React) will be covered in [part six](ui5-webcomponents-react-styling) 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.
The `Card` currently 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.

Expand All @@ -131,31 +131,33 @@ The Card now spreads across the whole screen, this behavior is intended, so it t

Hereby you get a standardized content-padding.

After this step `MyApp.tsx` should look like this:
```TypeScript / TSX
import { Card, CardHeader, Text } from "@ui5/webcomponents-react";
After this step `MyApp.tsx` should look like this:

export function MyApp() {
return (
<div>
<Card header={<CardHeader titleText="Card" />} style={{ width: "300px" }}>
<Text style={{ padding: "var(--sapContent_Space_S)" }}>
This is the content area of the Card
</Text>
</Card>
</div>
);
}
```
And your application like this:
```TypeScript / TSX
import { Card, CardHeader, Text } from "@ui5/webcomponents-react";

![Card03](03_card.png)
export function MyApp() {
return (
<div>
<Card header={<CardHeader titleText="Card" />} style={{ width: "300px" }}>
<Text style={{ padding: "var(--sapContent_Space_S)" }}>
This is the content area of the Card
</Text>
</Card>
</div>
);
}
```

Your application should look like this:

![Card03](03_card.png)


### Event handling


1. The Card header can also be interactive, to enable this set `interactive` to `true`.
1. The `Card` header can also be interactive, to enable this set `interactive` to `true`.

```TypeScript / TSX
<Card
Expand All @@ -164,11 +166,11 @@ And your application like this:
</Card>
```

_We didn't pass a value to `interactive`, because it [defaults to true](https://reactjs.org/docs/jsx-in-depth.html#props-default-to-true) if the value is omitted._
> We didn't pass a value to `interactive`, because it [defaults to true](https://reactjs.org/docs/jsx-in-depth.html#props-default-to-true) if the value is omitted.

When you now click or focus the header, the appropriate styles are applied, so users know they can interact with it.

2. To make the header react to a click (or SPACE/ENTER press), add a function as value to the `onClick` prop.
2. To make the header react to a click (or SPACE/ENTER press), add a function as value to the `onClick` prop.

```TypeScript / TSX
<Card
Expand All @@ -179,12 +181,14 @@ And your application like this:
onClick={handleHeaderClick}
/>
}
style={{ width: "300px" }}
>
...
</Card>
```

3. Now, add the callback function right in the beginning of the component (definition function):

```TypeScript / TSX
export function MyApp() {
const handleHeaderClick = () => {
Expand All @@ -193,35 +197,37 @@ And your application like this:
...
```

The file should now look like this:
```TypeScript / TSX
import { Card, CardHeader, Text } from "@ui5/webcomponents-react";

export function MyApp() {
const handleHeaderClick = () => {
alert("Header clicked");
};
return (
<div>
<Card
header={
<CardHeader
titleText="Card"
interactive
onClick={handleHeaderClick}
/>
}
style={{ width: "300px" }}
>
<Text style={{ padding: "var(--sapContent_Space_S)" }}>
This is the content area of the Card
</Text>
</Card>
</div>
);
}
```
Now the header opens an alert box on click.
The file should now look like this:

```TypeScript / TSX
import { Card, CardHeader, Text } from "@ui5/webcomponents-react";

export function MyApp() {
const handleHeaderClick = () => {
alert("Header clicked");
};
return (
<div>
<Card
header={
<CardHeader
titleText="Card"
interactive
onClick={handleHeaderClick}
/>
}
style={{ width: "300px" }}
>
<Text style={{ padding: "var(--sapContent_Space_S)" }}>
This is the content area of the Card
</Text>
</Card>
</div>
);
}
```

Now the header opens an alert box on click.



Expand Down
Loading
Loading