Directory

← Back

Card

Cards for Vaadin Flow

Author

Rating

Popularity

1300+

A Component that helps you to create Cards that can be found a lot in Applications that follow the Matieral design guidelines for Vaadin Flow. The cards fit by default the Lumo design since it relys on it's values.

By default there are 3 types of Cards:

  • (Card) Cards that only display Content
  • (ClickableCard) Cards that are Clickable
  • (RippleClickableCard) Cards that are Clickable with a effect
  • (StatefulCard) Cards that are Clickable and can be set to a visually selected state

Comes with some existing Components that are found a lot in the guidelines to help you creating cards faster.

  • Title | a plain large title
  • IconItem | a Image with Title / Title + Description beside it
  • Item | Title / Title + Description
  • ActionButton | borderless (or "tertiary") Button
  • Actions( ActionButton ... ) | Component to list the Buttons
  • StatefulCardGroup | Vertical Layout to fill with multiple StatefulCards that causes its children to behave similar to a Radio Button group
You need help, miss a feature or found a bug? Create an issue on Github!

Sample code

RippleClickableCard rcard = new RippleClickableCard(
        onClick -> {/* Handle Card click */},
        new TitleLabel("Example Title") // Follow up with more Components ...
);

ClickableCard ccard = new ClickableCard(
        onClick -> {/* Handle Card click */},
        new TitleLabel("Example Title") // Follow up with more Components ...
);

Card card = new Card(
        // if you don't want the title to wrap you can set the whitespace = nowrap
        new TitleLabel("Example Title").withWhiteSpaceNoWrap(),
        new PrimaryLabel("Some primary text"),
        new SecondaryLabel("Some secondary text"),
        new IconItem(getIcon(), "Icon Item title", "Icon Item description"),
        new Item("Item title", "Item description"),
        new Image("/frontend/bg.png", "bg.png"),
        new Actions(
                new ActionButton("Action 1", event -> {/* Handle Action*/}),
                new ActionButton("Action 2", event -> {/* Handle Action*/})
        )
);

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

  • added proper material theme support
  • updated paper-ripple dependency
  • updated iron-collapse dependency
Released
2020-09-14
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 14+
Vaadin 10+ in 0.6.1
Browser
Firefox
Opera
Safari
Google Chrome
Microsoft Edge

Card - Vaadin Add-on Directory

Cards for Vaadin Flow Card - Vaadin Add-on Directory
A Component that helps you to create Cards that can be found a lot in Applications that follow the [Matieral design guidelines](https://material.io/design/components/cards.html) for Vaadin Flow. The cards fit by default the Lumo design since it relys on it's values. By default there are 3 types of Cards: - (Card) Cards that only display Content - (ClickableCard) Cards that are Clickable - (RippleClickableCard) Cards that are Clickable with a effect - (StatefulCard) Cards that are Clickable and can be set to a visually selected state Comes with some existing Components that are found a lot in the guidelines to help you creating cards faster. - Title | a plain large title - IconItem | a Image with Title / Title + Description beside it - Item | Title / Title + Description - ActionButton | borderless (or "tertiary") Button - Actions( ActionButton ... ) | Component to list the Buttons - StatefulCardGroup | Vertical Layout to fill with multiple StatefulCards that causes its children to behave similar to a Radio Button group ##### [You need help, miss a feature or found a bug? Create an issue on Github!](https://github.com/appreciated/card/issues)
Issue tracker
Online Demo
Source Code

Card version 0.6.1
- API refactoring

Card version 0.7.0
- improved default behaviour - added dark Theme support

Card version 0.8.0
- added accessibility for the template div - improved support for grid-layout

Card version 0.8.1

Card version 0.9.0
- added StatefulCard which is a clickable card that can be set to a selected state - added StatefulCardGroup which can be imagined as cards that behave similar to a radio-button group - added method + fluent method to set the border-radius of cards - added method + fluent method to set the height of cards - added method + fluent method to set the width of cards - added fluent method to set click listener of clickable / stasteful cards - added method + fluent method to set the padding of any HorizontalCardComponentContainer - ItemBody withWhiteSpaceNoWrap not also sets also the attribute to the secondary label

Card version 0.9.1
- improved StatefulCardGroup API by adding Wildcards and an actual Click Listener

Card version 0.9.2
- allow setting the card background, transition and color - allow accessing element div

Card version 0.9.3
- added missing polymer imports

Card version 0.9.4
- enhancements for StatefulCardGroup

Card version 2.0.0.beta1
upgraded to Polymer 3 ## *The compatibility mode is currently not supported!*

Card version 2.0.0.beta2
- hopefully fixes #6 | UncheckedIOException ## *The compatibility mode is currently not supported!*

Card version 2.0.0.beta3
- hopefully fixes #6 | UncheckedIOException ## *The compatibility mode is currently not supported!*

Card version 2.0.0.beta4
- added Material theme support - added option to remove the state from StatefulCardGroup ## *The compatibility mode is currently not supported!*

Card version 2.0.0
- added proper material theme support - updated paper-ripple dependency - updated iron-collapse dependency

Online