Using cards in Vaadin

Yes, I know it is difficult to write CSS styles for a java programmer. All, he can do is, google and copy some styles that fits for him. So, I did the same. Here is the css file for cards.

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 5px; /* 5px rounded corners */
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.container {
  padding: 2px 16px;
}

And, how to use this in Java …

import com.holonplatform.core.datastore.Datastore;
import com.holonplatform.vaadin.flow.components.Components;
import com.holonplatform.vaadin.flow.components.Input;
import com.holonplatform.vaadin.flow.components.PropertyListing;
import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Emphasis;
import com.vaadin.flow.component.html.H4;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import org.springframework.beans.factory.annotation.Autowired;

import javax.annotation.PostConstruct;

@Route
@CssImport(value = "./styles/cards.css")

public class MainView extends VerticalLayout {

    @Autowired
    private Datastore datastore;

    private PropertyListing listing;

    @PostConstruct
    public void init() {

        setSizeFull();
        listing = Components.listing.properties(Product.PRODUCT)
                .dataSource(datastore, Product.TARGET)
                .build();

        add(addToCard("Form", Components.input
                .form(Product.PRODUCT)
                .build().getComponent()));

        add(addToCard("Grid", listing.getComponent()));

    }


    private Div addToCard(String text, Component component) {

        Div card = new Div();
        Div container = new Div();

        Emphasis emphasis = new Emphasis(text);
        container.add(new H4(emphasis));
        container.add(component);
        container.setClassName("container");

        card.add(container);
        card.setClassName("card");
        card.setWidthFull();

        return card;
    }


}

There are several card types available but achieving all from Java is not only super complex but also needs time & patience. So, I wish Vaadin makes some cards components in the future.