Vaadin 24 - I would need some hints for replacing / recreating ClickableCard

Flow
1

Hey there :slight_smile:

we are migrating an application to the latest Vaadin 24 version, today managed to get it up and running the first time.

But as we have used com.github.appreciated.card.ClickableCard at the “Home View” it seems we need to replace it somehow, because of the polymer based source.

Has anyone some hints or knows a replacement component?
cards

Pretty simple cards with shadow, a click navigates to the according View.

Cheers
Mojo

2

That’s very simple to create.
Use a div and add the styles.

3

Pseudo Code:

 <a href="yourView" class="lumo utility to make it pretty">
   <div>Content</div>
 </a>
4

I guessed already so, yes :upside_down_face:

Well I liked the Cards Addon, but ok then.
A div will do.

Thanks to both of you :wave:

1 Like
5

Just to add “my” solution:

creating a style:

.card-div {
    width: 100%;
    background-color: #e8f6f3;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    text-align: left;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

and then a div:

		var card = new Div();
		card.addClassName("card-div");
		card.add(new H4("Headline:"));
		card.add(new Paragraph("""
						some text and \
						some more text\
						"""));
		card.addSingleClickListener(event -> UI.getCurrent().navigate("target view"));

Works pretty well!

1 Like
6

I wild suggest to use the Lumo style CSS variables to match the Lumo theme.

1 Like
7

Lmao, me too, those variables are great

8

FWIW we are using Panel add-on which is similar: overcoded.io / panel-for-vaadin · GitLab

9

Thanks Jorg, (Jörg?)

wasn’t aware of that. Will keep it in mind, for the above “problem” the CSS is sufficient enough.

Cheers
Mojo

1 Like