0
# Layouts
1

2
Components for arranging UI elements: vertical/horizontal layouts, app layouts, forms, split layouts.
3

4
**Quick links:** [Basic Layouts](#basic-layouts) | [App Layout](#app-layout) | [Form Layout](#form-layout) | [Split & Accordion](#split--accordion) | [Card & Scroller](#card--scroller)
5

6
**Components in this section:** VerticalLayout, HorizontalLayout, AppLayout, FormLayout, SplitLayout, Accordion, AccordionPanel, Details, Card, Scroller, FlexLayout
7

8
## Basic Layouts
9

10
```java { .api }
11
class VerticalLayout extends Component implements HasComponents, HasStyle, HasSize {
12
    VerticalLayout();
13
    VerticalLayout(Component... components);
14
    void setAlignItems(Alignment alignment);
15
    void setJustifyContentMode(JustifyContentMode mode);
16
    void setSpacing(boolean spacing);
17
    void setPadding(boolean padding);
18
}
19

20
class HorizontalLayout extends Component implements HasComponents, HasStyle, HasSize {
21
    HorizontalLayout();
22
    HorizontalLayout(Component... components);
23
    void setAlignItems(Alignment alignment);
24
    void setJustifyContentMode(JustifyContentMode mode);
25
    void setSpacing(boolean spacing);
26
    void setFlexGrow(double flexGrow, Component... components);
27
}
28

29
enum Alignment {
30
    START, CENTER, END, STRETCH, BASELINE, AUTO
31
}
32

33
enum JustifyContentMode {
34
    START, CENTER, END, BETWEEN, AROUND, EVENLY
35
}
36
```
37

38
**Examples:**
39

40
```java
41
VerticalLayout layout = new VerticalLayout();
42
layout.setSpacing(true);
43
layout.setPadding(true);
44
layout.setAlignItems(Alignment.CENTER);
45
layout.add(new H1("Welcome"), new Button("Start"));
46

47
HorizontalLayout toolbar = new HorizontalLayout();
48
toolbar.setWidthFull();
49
toolbar.setJustifyContentMode(JustifyContentMode.BETWEEN);
50
toolbar.add(new Button("New"), new Button("Edit"), new Button("Delete"));
51
```
52

53
## App Layout
54

55
```java { .api }
56
class AppLayout extends Component {
57
    AppLayout();
58
    void addToNavbar(Component... components);
59
    void addToDrawer(Component... components);
60
    void setPrimarySection(Section section);
61
    void setDrawerOpened(boolean opened);
62
}
63

64
enum AppLayout.Section {
65
    NAVBAR, DRAWER
66
}
67

68
class DrawerToggle extends Button {
69
    DrawerToggle();
70
}
71
```
72

73
**Example:**
74

75
```java
76
@Route("")
77
public class MainLayout extends AppLayout {
78
    public MainLayout() {
79
        DrawerToggle toggle = new DrawerToggle();
80
        H1 title = new H1("My Application");
81
        addToNavbar(toggle, title);
82

83
        SideNav nav = new SideNav();
84
        nav.addItem(new SideNavItem("Home", HomeView.class));
85
        nav.addItem(new SideNavItem("Products", ProductsView.class));
86
        addToDrawer(nav);
87
    }
88
}
89
```
90

91
## Form Layout
92

93
```java { .api }
94
class FormLayout extends Component implements HasComponents, HasStyle, HasSize {
95
    FormLayout();
96
    void setResponsiveSteps(ResponsiveStep... steps);
97
    void setColspan(Component component, int colspan);
98
}
99

100
class FormLayout.ResponsiveStep {
101
    ResponsiveStep(String minWidth, int columns);
102
    ResponsiveStep(String minWidth, int columns, LabelsPosition labelsPosition);
103
}
104

105
enum LabelsPosition {
106
    TOP, ASIDE
107
}
108
```
109

110
**Example:**
111

112
```java
113
FormLayout formLayout = new FormLayout();
114
formLayout.setResponsiveSteps(
115
    new FormLayout.ResponsiveStep("0", 1),
116
    new FormLayout.ResponsiveStep("500px", 2)
117
);
118

119
TextField firstName = new TextField("First Name");
120
TextField lastName = new TextField("Last Name");
121
TextArea comments = new TextArea("Comments");
122

123
formLayout.add(firstName, lastName);
124
formLayout.add(comments);
125
formLayout.setColspan(comments, 2);
126
```
127

128
## Split & Accordion
129

130
```java { .api }
131
class SplitLayout extends Component {
132
    SplitLayout();
133
    SplitLayout(Orientation orientation);
134
    SplitLayout(Component primary, Component secondary);
135
    void addToPrimary(Component component);
136
    void addToSecondary(Component component);
137
    void setSplitterPosition(double position);
138
}
139

140
enum SplitLayout.Orientation {
141
    HORIZONTAL, VERTICAL
142
}
143

144
class Accordion extends Component {
145
    Accordion();
146
    AccordionPanel add(String summary, Component content);
147
    Accordion open(AccordionPanel panel);
148
}
149

150
class AccordionPanel extends Component {
151
    AccordionPanel();
152
    AccordionPanel(String summary, Component content);
153
    void setSummaryText(String summary);
154
    void addContent(Component... components);
155
    void setOpened(boolean opened);
156
}
157

158
class Details extends Component {
159
    Details();
160
    Details(String summary, Component content);
161
    void setOpened(boolean opened);
162
}
163
```
164

165
**Examples:**
166

167
```java
168
SplitLayout split = new SplitLayout();
169
split.addToPrimary(new Div(new H3("Left Panel")));
170
split.addToSecondary(new Div(new H3("Right Panel")));
171
split.setSplitterPosition(30);
172

173
Accordion accordion = new Accordion();
174
accordion.add("Personal", new VerticalLayout(
175
    new TextField("Name"), new EmailField("Email")
176
));
177
accordion.add("Address", new VerticalLayout(
178
    new TextField("Street"), new TextField("City")
179
));
180
```
181

182
## Card & Scroller
183

184
```java { .api }
185
class Card extends Div {
186
    Card();
187
    Card(Component... components);
188
    void setTitle(Component title);
189
}
190

191
class Scroller extends Component implements HasComponents, HasStyle, HasSize {
192
    Scroller();
193
    Scroller(Component content);
194
    void setScrollDirection(ScrollDirection scrollDirection);
195
}
196

197
enum Scroller.ScrollDirection {
198
    VERTICAL, HORIZONTAL, BOTH, NONE
199
}
200

201
class FlexLayout extends Component implements HasComponents, HasStyle, HasSize {
202
    FlexLayout();
203
    FlexLayout(Component... components);
204
    void setFlexDirection(FlexDirection flexDirection);
205
    void setJustifyContentMode(JustifyContentMode mode);
206
    void setAlignItems(Alignment alignItems);
207
    void setFlexGrow(double flexGrow, Component... components);
208
}
209

210
enum FlexLayout.FlexDirection {
211
    ROW, ROW_REVERSE, COLUMN, COLUMN_REVERSE
212
}
213
```
214

215
**Examples:**
216

217
```java
218
Card card = new Card();
219
card.add(new H3("Product"), new Paragraph("Description"), new Button("Buy"));
220

221
Scroller scroller = new Scroller(longContent);
222
scroller.setHeight("400px");
223
scroller.setScrollDirection(Scroller.ScrollDirection.VERTICAL);
224
```
225