Skip to content

Commit db36e83

Browse files
sissbrueckersissbruecker
authored
docs: card flow examples (#4229)
1 parent d29b1fa commit db36e83

15 files changed

+585
-84
lines changed

‎articles/components/card/index.adoc

Lines changed: 84 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -53,12 +53,12 @@ include::{root}/frontend/demo/component/card/card-content.ts[render,tags=snippet
5353
----
5454
endif::[]
5555

56-
// ifdef::flow[]
57-
// [source,java]
58-
// ----
59-
// include::{root}/src/main/java/com/vaadin/demo/component/card/CardContent.java[render,tags=snippet,indent=0,group=Flow]
60-
// ----
61-
// endif::[]
56+
ifdef::flow[]
57+
[source,java]
58+
----
59+
include::{root}/src/main/java/com/vaadin/demo/component/card/CardContent.java[render,tags=snippet,indent=0,group=Flow]
60+
----
61+
endif::[]
6262

6363
ifdef::react[]
6464
[source,tsx]
@@ -84,12 +84,12 @@ include::{root}/frontend/demo/component/card/card-media.ts[render,tags=snippet,i
8484
----
8585
endif::[]
8686

87-
// ifdef::flow[]
88-
// [source,java]
89-
// ----
90-
// include::{root}/src/main/java/com/vaadin/demo/component/card/CardMedia.java[render,tags=snippet,indent=0,group=Flow]
91-
// ----
92-
// endif::[]
87+
ifdef::flow[]
88+
[source,java]
89+
----
90+
include::{root}/src/main/java/com/vaadin/demo/component/card/CardMedia.java[render,tags=snippet,indent=0,group=Flow]
91+
----
92+
endif::[]
9393

9494
ifdef::react[]
9595
[source,tsx]
@@ -113,12 +113,12 @@ include::{root}/frontend/demo/component/card/card-title.ts[render,tags=snippet,i
113113
----
114114
endif::[]
115115

116-
// ifdef::flow[]
117-
// [source,java]
118-
// ----
119-
// include::{root}/src/main/java/com/vaadin/demo/component/card/CardTitle.java[render,tags=snippet,indent=0,group=Flow]
120-
// ----
121-
// endif::[]
116+
ifdef::flow[]
117+
[source,java]
118+
----
119+
include::{root}/src/main/java/com/vaadin/demo/component/card/CardTitle.java[render,tags=snippet,indent=0,group=Flow]
120+
----
121+
endif::[]
122122

123123
ifdef::react[]
124124
[source,tsx]
@@ -142,12 +142,12 @@ include::{root}/frontend/demo/component/card/card-subtitle.ts[render,tags=snippe
142142
----
143143
endif::[]
144144

145-
// ifdef::flow[]
146-
// [source,java]
147-
// ----
148-
// include::{root}/src/main/java/com/vaadin/demo/component/card/CardSubtitle.java[render,tags=snippet,indent=0,group=Flow]
149-
// ----
150-
// endif::[]
145+
ifdef::flow[]
146+
[source,java]
147+
----
148+
include::{root}/src/main/java/com/vaadin/demo/component/card/CardSubtitle.java[render,tags=snippet,indent=0,group=Flow]
149+
----
150+
endif::[]
151151

152152
ifdef::react[]
153153
[source,tsx]
@@ -171,12 +171,12 @@ include::{root}/frontend/demo/component/card/card-header.ts[render,tags=snippet,
171171
----
172172
endif::[]
173173

174-
// ifdef::flow[]
175-
// [source,java]
176-
// ----
177-
// include::{root}/src/main/java/com/vaadin/demo/component/card/CardHeader.java[render,tags=snippet,indent=0,group=Flow]
178-
// ----
179-
// endif::[]
174+
ifdef::flow[]
175+
[source,java]
176+
----
177+
include::{root}/src/main/java/com/vaadin/demo/component/card/CardHeader.java[render,tags=snippet,indent=0,group=Flow]
178+
----
179+
endif::[]
180180

181181
ifdef::react[]
182182
[source,tsx]
@@ -201,12 +201,12 @@ include::{root}/frontend/demo/component/card/card-header-prefix.ts[render,tags=s
201201
----
202202
endif::[]
203203

204-
// ifdef::flow[]
205-
// [source,java]
206-
// ----
207-
// include::{root}/src/main/java/com/vaadin/demo/component/card/CardHeaderPrefix.java[render,tags=snippet,indent=0,group=Flow]
208-
// ----
209-
// endif::[]
204+
ifdef::flow[]
205+
[source,java]
206+
----
207+
include::{root}/src/main/java/com/vaadin/demo/component/card/CardHeaderPrefix.java[render,tags=snippet,indent=0,group=Flow]
208+
----
209+
endif::[]
210210

211211
ifdef::react[]
212212
[source,tsx]
@@ -230,12 +230,12 @@ include::{root}/frontend/demo/component/card/card-header-suffix.ts[render,tags=s
230230
----
231231
endif::[]
232232

233-
// ifdef::flow[]
234-
// [source,java]
235-
// ----
236-
// include::{root}/src/main/java/com/vaadin/demo/component/card/CardHeaderSuffix.java[render,tags=snippet,indent=0,group=Flow]
237-
// ----
238-
// endif::[]
233+
ifdef::flow[]
234+
[source,java]
235+
----
236+
include::{root}/src/main/java/com/vaadin/demo/component/card/CardHeaderSuffix.java[render,tags=snippet,indent=0,group=Flow]
237+
----
238+
endif::[]
239239

240240
ifdef::react[]
241241
[source,tsx]
@@ -259,12 +259,12 @@ include::{root}/frontend/demo/component/card/card-footer.ts[render,tags=snippet,
259259
----
260260
endif::[]
261261

262-
// ifdef::flow[]
263-
// [source,java]
264-
// ----
265-
// include::{root}/src/main/java/com/vaadin/demo/component/card/CardFooter.java[render,tags=snippet,indent=0,group=Flow]
266-
// ----
267-
// endif::[]
262+
ifdef::flow[]
263+
[source,java]
264+
----
265+
include::{root}/src/main/java/com/vaadin/demo/component/card/CardFooter.java[render,tags=snippet,indent=0,group=Flow]
266+
----
267+
endif::[]
268268

269269
ifdef::react[]
270270
[source,tsx]
@@ -293,12 +293,12 @@ include::{root}/frontend/demo/component/card/card-outlined.ts[render,tags=snippe
293293
----
294294
endif::[]
295295

296-
// ifdef::flow[]
297-
// [source,java]
298-
// ----
299-
// include::{root}/src/main/java/com/vaadin/demo/component/card/CardOutlined.java[render,tags=snippet,indent=0,group=Flow]
300-
// ----
301-
// endif::[]
296+
ifdef::flow[]
297+
[source,java]
298+
----
299+
include::{root}/src/main/java/com/vaadin/demo/component/card/CardOutlined.java[render,tags=snippet,indent=0,group=Flow]
300+
----
301+
endif::[]
302302

303303
ifdef::react[]
304304
[source,tsx]
@@ -322,12 +322,12 @@ include::{root}/frontend/demo/component/card/card-elevated.ts[render,tags=snippe
322322
----
323323
endif::[]
324324

325-
// ifdef::flow[]
326-
// [source,java]
327-
// ----
328-
// include::{root}/src/main/java/com/vaadin/demo/component/card/CardElevated.java[render,tags=snippet,indent=0,group=Flow]
329-
// ----
330-
// endif::[]
325+
ifdef::flow[]
326+
[source,java]
327+
----
328+
include::{root}/src/main/java/com/vaadin/demo/component/card/CardElevated.java[render,tags=snippet,indent=0,group=Flow]
329+
----
330+
endif::[]
331331

332332
ifdef::react[]
333333
[source,tsx]
@@ -351,12 +351,12 @@ include::{root}/frontend/demo/component/card/card-horizontal.ts[render,tags=snip
351351
----
352352
endif::[]
353353

354-
// ifdef::flow[]
355-
// [source,java]
356-
// ----
357-
// include::{root}/src/main/java/com/vaadin/demo/component/card/CardHorizontal.java[render,tags=snippet,indent=0,group=Flow]
358-
// ----
359-
// endif::[]
354+
ifdef::flow[]
355+
[source,java]
356+
----
357+
include::{root}/src/main/java/com/vaadin/demo/component/card/CardHorizontal.java[render,tags=snippet,indent=0,group=Flow]
358+
----
359+
endif::[]
360360

361361
ifdef::react[]
362362
[source,tsx]
@@ -380,12 +380,12 @@ include::{root}/frontend/demo/component/card/card-stretch-media.ts[render,tags=s
380380
----
381381
endif::[]
382382

383-
// ifdef::flow[]
384-
// [source,java]
385-
// ----
386-
// include::{root}/src/main/java/com/vaadin/demo/component/card/CardStretchMedia.java[render,tags=snippet,indent=0,group=Flow]
387-
// ----
388-
// endif::[]
383+
ifdef::flow[]
384+
[source,java]
385+
----
386+
include::{root}/src/main/java/com/vaadin/demo/component/card/CardStretchMedia.java[render,tags=snippet,indent=0,group=Flow]
387+
----
388+
endif::[]
389389

390390
ifdef::react[]
391391
[source,tsx]
@@ -409,12 +409,12 @@ include::{root}/frontend/demo/component/card/card-cover-media.ts[render,tags=sni
409409
----
410410
endif::[]
411411

412-
// ifdef::flow[]
413-
// [source,java]
414-
// ----
415-
// include::{root}/src/main/java/com/vaadin/demo/component/card/CardCoverMedia.java[render,tags=snippet,indent=0,group=Flow]
416-
// ----
417-
// endif::[]
412+
ifdef::flow[]
413+
[source,java]
414+
----
415+
include::{root}/src/main/java/com/vaadin/demo/component/card/CardCoverMedia.java[render,tags=snippet,indent=0,group=Flow]
416+
----
417+
endif::[]
418418

419419
ifdef::react[]
420420
[source,tsx]
@@ -438,12 +438,12 @@ include::{root}/frontend/demo/component/card/card-combine-variants.ts[render,tag
438438
----
439439
endif::[]
440440

441-
// ifdef::flow[]
442-
// [source,java]
443-
// ----
444-
// include::{root}/src/main/java/com/vaadin/demo/component/card/CardCombineVariants.java[render,tags=snippet,indent=0,group=Flow]
445-
// ----
446-
// endif::[]
441+
ifdef::flow[]
442+
[source,java]
443+
----
444+
include::{root}/src/main/java/com/vaadin/demo/component/card/CardCombineVariants.java[render,tags=snippet,indent=0,group=Flow]
445+
----
446+
endif::[]
447447

448448
ifdef::react[]
449449
[source,tsx]

‎src/main/java/com/vaadin/demo/component/card/CardCombineVariants.java

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
package com.vaadin.demo.component.card;
2+
3+
import com.vaadin.demo.DemoExporter; // hidden-source-line
4+
import com.vaadin.flow.component.card.Card;
5+
import com.vaadin.flow.component.card.CardVariant;
6+
import com.vaadin.flow.component.html.Div;
7+
import com.vaadin.flow.component.html.Image;
8+
import com.vaadin.flow.router.Route;
9+
import com.vaadin.flow.server.StreamResource;
10+
11+
@Route("card-combine-variants")
12+
public class CardCombineVariants extends Div {
13+
public CardCombineVariants() {
14+
// tag::snippet[]
15+
Card card = new Card();
16+
card.addThemeVariants(
17+
CardVariant.LUMO_OUTLINED,
18+
CardVariant.LUMO_ELEVATED,
19+
CardVariant.LUMO_HORIZONTAL,
20+
CardVariant.LUMO_COVER_MEDIA
21+
);
22+
23+
StreamResource imageResource = new StreamResource("lapland.avif",
24+
() -> getClass().getResourceAsStream("/images/lapland.avif"));
25+
Image image = new Image(imageResource, "");
26+
image.setWidth("200px");
27+
card.setMedia(image);
28+
29+
card.setTitle(new Div("Lapland"));
30+
card.setSubtitle(new Div("The Exotic North"));
31+
card.add(new Div("Lapland is the northern-most region of Finland and an active outdoor destination."));
32+
// end::snippet[]
33+
34+
add(card);
35+
}
36+
37+
public static class Exporter extends DemoExporter<CardCombineVariants> { // hidden-source-line
38+
} // hidden-source-line
39+
}

‎src/main/java/com/vaadin/demo/component/card/CardContent.java

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
package com.vaadin.demo.component.card;
2+
3+
import com.vaadin.demo.DemoExporter; // hidden-source-line
4+
import com.vaadin.flow.component.card.Card;
5+
import com.vaadin.flow.component.html.Div;
6+
import com.vaadin.flow.component.html.Paragraph;
7+
import com.vaadin.flow.router.Route;
8+
9+
@Route("card-content")
10+
public class CardContent extends Div {
11+
public CardContent() {
12+
// tag::snippet[]
13+
Card card = new Card();
14+
15+
Paragraph p1 = new Paragraph(
16+
"Lapland is the northern-most region of Finland and an active outdoor destination that's " +
17+
"known for its incredible, year-round light phenomena, vast arctic nature, and Santa Claus.");
18+
19+
Paragraph p2 = new Paragraph(
20+
"The land of the indigenous Sámi people, known as Sámi homeland or Sápmi, also crosses the " +
21+
"northern part of the region.");
22+
23+
card.add(p1, p2);
24+
// end::snippet[]
25+
26+
card.setMaxWidth("300px");
27+
add(card);
28+
}
29+
30+
public static class Exporter extends DemoExporter<CardContent> { // hidden-source-line
31+
} // hidden-source-line
32+
}

‎src/main/java/com/vaadin/demo/component/card/CardCoverMedia.java

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
package com.vaadin.demo.component.card;
2+
3+
import com.vaadin.demo.DemoExporter; // hidden-source-line
4+
import com.vaadin.flow.component.card.Card;
5+
import com.vaadin.flow.component.card.CardVariant;
6+
import com.vaadin.flow.component.html.Div;
7+
import com.vaadin.flow.component.html.Image;
8+
import com.vaadin.flow.component.icon.Icon;
9+
import com.vaadin.flow.router.Route;
10+
import com.vaadin.flow.server.StreamResource;
11+
import com.vaadin.flow.theme.lumo.LumoIcon;
12+
13+
@Route("card-cover-media")
14+
public class CardCoverMedia extends Div {
15+
public CardCoverMedia() {
16+
Div layout = new Div();
17+
layout.getStyle().set("display", "grid")
18+
.set("grid-template-columns", "repeat(auto-fill, minmax(200px, 1fr))")
19+
.set("gap", "1em");
20+
21+
// tag::snippet[]
22+
// Card with cover image
23+
Card imageCard = new Card();
24+
imageCard.addThemeVariants(CardVariant.LUMO_COVER_MEDIA);
25+
26+
StreamResource imageResource = new StreamResource("lapland.avif",
27+
() -> getClass().getResourceAsStream("/images/lapland.avif"));
28+
Image image = new Image(imageResource, "");
29+
imageCard.setMedia(image);
30+
31+
imageCard.setTitle(new Div("Lapland"));
32+
imageCard.setSubtitle(new Div("The Exotic North"));
33+
imageCard.add("Lapland is the northern-most region of Finland and an active outdoor destination.");
34+
35+
// Card with cover icon
36+
Card iconCard = new Card();
37+
iconCard.addThemeVariants(CardVariant.LUMO_COVER_MEDIA);
38+
39+
Icon icon = LumoIcon.PHOTO.create();
40+
icon.getStyle()
41+
.setColor("var(--lumo-primary-color)")
42+
.setBackgroundColor("var(--lumo-primary-color-10pct)");
43+
iconCard.setMedia(icon);
44+
45+
iconCard.setTitle(new Div("Lapland"));
46+
iconCard.setSubtitle(new Div("The Exotic North"));
47+
iconCard.add("Lapland is the northern-most region of Finland and an active outdoor destination.");
48+
// end::snippet[]
49+
50+
layout.add(imageCard, iconCard);
51+
add(layout);
52+
}
53+
54+
public static class Exporter extends DemoExporter<CardCoverMedia> { // hidden-source-line
55+
} // hidden-source-line
56+
}

0 commit comments

Comments
 (0)