Card
Cards for Vaadin Flow
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*/}) ) );
Links
Compatibility
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 FlowOnline 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.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