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 FlowA 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)