Skip to content

Commit fabef8a

Browse files
DiegoCardosoDiegoCardoso
committed
doc: add section about wrapping to horizontal and vertical layouts
1 parent c324f76 commit fabef8a

File tree

8 files changed

+351
-0
lines changed

8 files changed

+351
-0
lines changed

‎articles/components/horizontal-layout/index.adoc

+29
Original file line numberDiff line numberDiff line change
@@ -337,6 +337,35 @@ include::{root}/frontend/demo/component/basiclayouts/react/basic-layouts-horizon
337337
endif::[]
338338
--
339339

340+
== Wrapping
341+
342+
By default, components in a layout will either shrink or overflow when there isn't enough horizontal space. Enable wrapping to make components flow onto the next line when there's insufficient width, preventing overflow.
343+
344+
[.example]
345+
--
346+
347+
ifdef::lit[]
348+
[source,typescript]
349+
----
350+
include::{root}/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-wrapping.ts[render,tags=snippet,indent=0,group=Lit]
351+
----
352+
endif::[]
353+
354+
ifdef::flow[]
355+
[source,java]
356+
----
357+
include::{root}/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutWrapping.java[render,tags=snippet,indent=0,group=Flow]
358+
----
359+
endif::[]
360+
361+
ifdef::react[]
362+
[source,tsx]
363+
----
364+
include::{root}/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-wrapping.tsx[render,tags=snippet,indent=0,group=React]
365+
----
366+
endif::[]
367+
--
368+
340369

341370
== Expanding Items
342371

‎articles/components/vertical-layout/index.adoc

+31
Original file line numberDiff line numberDiff line change
@@ -344,5 +344,36 @@ include::{root}/frontend/demo/component/basiclayouts/react/basic-layouts-margin.
344344
endif::[]
345345
--
346346

347+
== Wrapping
348+
349+
By default, components in a layout will either shrink or overflow when there isn't enough vertical space. Enable wrapping to make components flow onto the next column when there's insufficient width, preventing overflow.
350+
351+
[.example]
352+
--
353+
354+
ifdef::lit[]
355+
[source,typescript]
356+
----
357+
include::{root}/frontend/demo/component/basiclayouts/basic-layouts-vertical-layout-wrapping.ts[render,tags=snippet,indent=0,group=Lit]
358+
----
359+
endif::[]
360+
361+
ifdef::flow[]
362+
[source,java]
363+
----
364+
include::{root}/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsVerticalLayoutWrapping.java[render,tags=snippet,indent=0,group=Flow]
365+
----
366+
endif::[]
367+
368+
ifdef::react[]
369+
[source,tsx]
370+
----
371+
include::{root}/frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-wrapping.tsx[render,tags=snippet,indent=0,group=React]
372+
----
373+
endif::[]
374+
--
375+
376+
377+
347378

348379
[discussion-id]`73cc0e40-d39a-11ed-afa1-0242ac120002`

‎frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-wrapping.ts

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import 'Frontend/demo/init'; // hidden-source-line
2+
import '@vaadin/button';
3+
import '@vaadin/horizontal-layout';
4+
import '@vaadin/radio-group';
5+
import { html, LitElement } from 'lit';
6+
import { customElement, state } from 'lit/decorators.js';
7+
import type { RadioGroupValueChangedEvent } from '@vaadin/radio-group';
8+
import { applyTheme } from 'Frontend/generated/theme';
9+
10+
@customElement('basic-layouts-horizontal-layout-wrapping')
11+
export class Example extends LitElement {
12+
connectedCallback() {
13+
super.connectedCallback();
14+
this.classList.add('basic-layouts-example');
15+
}
16+
17+
protected override createRenderRoot() {
18+
const root = super.createRenderRoot();
19+
// Apply custom theme (only supported if your app uses one)
20+
applyTheme(root);
21+
return root;
22+
}
23+
24+
protected override render() {
25+
return html`
26+
<vaadin-horizontal-layout
27+
theme="spacing margin padding"
28+
style="align-items: stretch; width: 350px;"
29+
>
30+
<vaadin-button>Button 1</vaadin-button>
31+
<vaadin-button>Button 2</vaadin-button>
32+
<vaadin-button>Button 3</vaadin-button>
33+
<vaadin-button>Button 4</vaadin-button>
34+
<vaadin-button>Button 5</vaadin-button>
35+
</vaadin-horizontal-layout>
36+
37+
<!-- tag::snippet[] -->
38+
<vaadin-horizontal-layout
39+
theme="wrap spacing margin padding"
40+
style="align-items: stretch; width: 350px;"
41+
>
42+
<vaadin-button>Button 1</vaadin-button>
43+
<vaadin-button>Button 2</vaadin-button>
44+
<vaadin-button>Button 3</vaadin-button>
45+
<vaadin-button>Button 4</vaadin-button>
46+
<vaadin-button>Button 5</vaadin-button>
47+
</vaadin-horizontal-layout>
48+
<!-- end::snippet[] -->
49+
`;
50+
}
51+
}

‎frontend/demo/component/basiclayouts/basic-layouts-vertical-layout-wrapping.ts

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import 'Frontend/demo/init'; // hidden-source-line
2+
import '@vaadin/button';
3+
import '@vaadin/vertical-layout';
4+
import '@vaadin/horizontal-layout';
5+
import { html, LitElement } from 'lit';
6+
import { customElement, state } from 'lit/decorators.js';
7+
import { applyTheme } from 'Frontend/generated/theme';
8+
9+
@customElement('basic-layouts-vertical-layout-wrapping')
10+
export class Example extends LitElement {
11+
connectedCallback() {
12+
super.connectedCallback();
13+
this.classList.add('basic-layouts-example');
14+
}
15+
16+
protected override createRenderRoot() {
17+
const root = super.createRenderRoot();
18+
// Apply custom theme (only supported if your app uses one)
19+
applyTheme(root);
20+
return root;
21+
}
22+
23+
protected override render() {
24+
return html`
25+
<vaadin-horizontal-layout
26+
theme="margin spacing"
27+
style="align-items: stretch; border: 0; justify-content: stretch;"
28+
>
29+
<vaadin-vertical-layout
30+
theme="spacing padding"
31+
style="align-items: stretch; height: 200px; width: 100%;"
32+
>
33+
<vaadin-button>Button 1</vaadin-button>
34+
<vaadin-button>Button 2</vaadin-button>
35+
<vaadin-button>Button 3</vaadin-button>
36+
<vaadin-button>Button 4</vaadin-button>
37+
</vaadin-vertical-layout>
38+
39+
<!-- tag::snippet[] -->
40+
<vaadin-vertical-layout
41+
theme="wrap spacing padding"
42+
style="align-items: stretch; height: 200px; width: 100%;"
43+
>
44+
<vaadin-button>Button 1</vaadin-button>
45+
<vaadin-button>Button 2</vaadin-button>
46+
<vaadin-button>Button 3</vaadin-button>
47+
<vaadin-button>Button 4</vaadin-button>
48+
</vaadin-vertical-layout>
49+
</vaadin-horizontal-layout>
50+
<!-- end::snippet[] -->
51+
`;
52+
}
53+
}

‎frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-wrapping.tsx

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
2+
import React from 'react'; // hidden-source-line
3+
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
4+
import { useSignal } from '@vaadin/hilla-react-signals';
5+
import {
6+
Button,
7+
HorizontalLayout,
8+
RadioButton,
9+
RadioGroup,
10+
type RadioGroupValueChangedEvent,
11+
} from '@vaadin/react-components';
12+
import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
13+
14+
function Example() {
15+
useSignals(); // hidden-source-line
16+
17+
return (
18+
<>
19+
<HorizontalLayout
20+
theme="spacing margin padding"
21+
style={{ alignItems: 'stretch', width: '350px' }}
22+
>
23+
<Button>Button 1</Button>
24+
<Button>Button 2</Button>
25+
<Button>Button 3</Button>
26+
<Button>Button 4</Button>
27+
<Button>Button 5</Button>
28+
</HorizontalLayout>
29+
{/* tag::snippet[] */}
30+
<HorizontalLayout
31+
theme="wrap spacing margin padding"
32+
style={{ alignItems: 'stretch', width: '350px' }}
33+
>
34+
<Button>Button 1</Button>
35+
<Button>Button 2</Button>
36+
<Button>Button 3</Button>
37+
<Button>Button 4</Button>
38+
<Button>Button 5</Button>
39+
</HorizontalLayout>
40+
{/* end::snippet[] */}
41+
</>
42+
);
43+
}
44+
45+
export default reactExample(Example, layoutExampleStyle); // hidden-source-line

‎frontend/demo/component/basiclayouts/react/basic-layouts-vertical-layout-wrapping.tsx

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
2+
import React from 'react'; // hidden-source-line
3+
import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
4+
import { Button, HorizontalLayout, VerticalLayout } from '@vaadin/react-components';
5+
import layoutExampleStyle from './layoutExampleStyle'; // hidden-source-line
6+
7+
function Example() {
8+
useSignals(); // hidden-source-line
9+
10+
return (
11+
<>
12+
<HorizontalLayout theme="spacing margin" style={{ border: 0, justifyContent: 'stretch' }}>
13+
<VerticalLayout
14+
theme="spacing padding"
15+
style={{ alignItems: 'stretch', height: '200px', width: '100%' }}
16+
>
17+
<Button>Button 1</Button>
18+
<Button>Button 2</Button>
19+
<Button>Button 3</Button>
20+
<Button>Button 4</Button>
21+
</VerticalLayout>
22+
{/* tag::snippet[] */}
23+
<VerticalLayout
24+
theme="wrap spacing padding"
25+
style={{ alignItems: 'stretch', height: '200px', width: '100%' }}
26+
>
27+
<Button>Button 1</Button>
28+
<Button>Button 2</Button>
29+
<Button>Button 3</Button>
30+
<Button>Button 4</Button>
31+
</VerticalLayout>
32+
{/* end::snippet[] */}
33+
</HorizontalLayout>
34+
</>
35+
);
36+
}
37+
38+
export default reactExample(Example, layoutExampleStyle); // hidden-source-line

‎src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutWrapping.java

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
package com.vaadin.demo.component.basiclayouts;
2+
3+
import com.vaadin.demo.DemoExporter; // hidden-source-line
4+
import com.vaadin.flow.component.html.Div;
5+
import com.vaadin.flow.component.button.Button;
6+
import com.vaadin.flow.component.orderedlayout.FlexComponent;
7+
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
8+
import com.vaadin.flow.router.Route;
9+
10+
@Route("basic-layouts/horizontal-layout-wrapping")
11+
public class BasicLayoutsHorizontalLayoutWrapping extends Div {
12+
13+
public BasicLayoutsHorizontalLayoutWrapping() {
14+
HorizontalLayout layoutNoWrap = new HorizontalLayout();
15+
layoutNoWrap.setPadding(true);
16+
layoutNoWrap.setSpacing(true);
17+
layoutNoWrap.setMargin(true);
18+
layoutNoWrap.setAlignItems(FlexComponent.Alignment.STRETCH);
19+
layoutNoWrap.setWidth("350px");
20+
layoutNoWrap.add(new Button("Button 1"));
21+
layoutNoWrap.add(new Button("Button 2"));
22+
layoutNoWrap.add(new Button("Button 3"));
23+
layoutNoWrap.add(new Button("Button 4"));
24+
layoutNoWrap.add(new Button("Button 5"));
25+
this.add(layoutNoWrap);
26+
27+
// tag::snippet[]
28+
HorizontalLayout layout = new HorizontalLayout();
29+
layout.setPadding(true);
30+
layout.setSpacing(true);
31+
layout.setMargin(true);
32+
layout.setWrap(true);
33+
layout.setAlignItems(FlexComponent.Alignment.STRETCH);
34+
layout.setWidth("350px");
35+
layout.add(new Button("Button 1"));
36+
layout.add(new Button("Button 2"));
37+
layout.add(new Button("Button 3"));
38+
layout.add(new Button("Button 4"));
39+
layout.add(new Button("Button 5"));
40+
// end::snippet[]
41+
42+
this.setClassName("basic-layouts-example");
43+
this.add(layout);
44+
}
45+
46+
public static class Exporter // hidden-source-line
47+
extends DemoExporter<BasicLayoutsHorizontalLayoutWrapping> { // hidden-source-line
48+
} // hidden-source-line
49+
}

‎src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsVerticalLayoutWrapping.java

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
package com.vaadin.demo.component.basiclayouts;
2+
3+
import com.vaadin.demo.DemoExporter; // hidden-source-line
4+
import com.vaadin.flow.component.html.Div;
5+
import com.vaadin.flow.component.button.Button;
6+
import com.vaadin.flow.component.orderedlayout.FlexComponent;
7+
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
8+
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
9+
import com.vaadin.flow.router.Route;
10+
import com.vaadin.flow.theme.lumo.LumoUtility.Margin.Minus.Horizontal;
11+
12+
@Route("basic-layouts/vertical-layout-wrapping")
13+
public class BasicLayoutsVerticalLayoutWrapping extends Div {
14+
15+
public BasicLayoutsVerticalLayoutWrapping() {
16+
HorizontalLayout parent = new HorizontalLayout();
17+
parent.setSpacing(true);
18+
parent.setMargin(true);
19+
parent.getElement().getStyle().setBorder("0");
20+
21+
VerticalLayout layoutNoWrap = new VerticalLayout();
22+
layoutNoWrap.setPadding(true);
23+
layoutNoWrap.setSpacing(true);
24+
layoutNoWrap.setAlignItems(FlexComponent.Alignment.STRETCH);
25+
layoutNoWrap.setHeight("200px");
26+
layoutNoWrap.setWidthFull();
27+
layoutNoWrap.add(new Button("Button 1"));
28+
layoutNoWrap.add(new Button("Button 2"));
29+
layoutNoWrap.add(new Button("Button 3"));
30+
layoutNoWrap.add(new Button("Button 4"));
31+
parent.add(layoutNoWrap);
32+
33+
// tag::snippet[]
34+
VerticalLayout layout = new VerticalLayout();
35+
layout.setPadding(true);
36+
layout.setSpacing(true);
37+
layout.setWrap(true);
38+
layout.setAlignItems(FlexComponent.Alignment.STRETCH);
39+
layout.setHeight("200px");
40+
layout.setWidthFull();
41+
layout.add(new Button("Button 1"));
42+
layout.add(new Button("Button 2"));
43+
layout.add(new Button("Button 3"));
44+
layout.add(new Button("Button 4"));
45+
// end::snippet[]
46+
47+
parent.add(layout);
48+
this.setClassName("basic-layouts-example");
49+
this.add(parent);
50+
}
51+
52+
public static class Exporter // hidden-source-line
53+
extends DemoExporter<BasicLayoutsVerticalLayoutWrapping> { // hidden-source-line
54+
} // hidden-source-line
55+
}

0 commit comments

Comments
 (0)