Vaadin Platform (vaadin-core) - Core component of the Vaadin web framework platform
Components for arranging UI elements: vertical/horizontal layouts, app layouts, forms, split layouts.
Quick links: Basic Layouts | App Layout | Form Layout | Split & Accordion | Card & Scroller
Components in this section: VerticalLayout, HorizontalLayout, AppLayout, FormLayout, SplitLayout, Accordion, AccordionPanel, Details, Card, Scroller, FlexLayout
class VerticalLayout extends Component implements HasComponents, HasStyle, HasSize {
VerticalLayout();
VerticalLayout(Component... components);
void setAlignItems(Alignment alignment);
void setJustifyContentMode(JustifyContentMode mode);
void setSpacing(boolean spacing);
void setPadding(boolean padding);
}
class HorizontalLayout extends Component implements HasComponents, HasStyle, HasSize {
HorizontalLayout();
HorizontalLayout(Component... components);
void setAlignItems(Alignment alignment);
void setJustifyContentMode(JustifyContentMode mode);
void setSpacing(boolean spacing);
void setFlexGrow(double flexGrow, Component... components);
}
enum Alignment {
START, CENTER, END, STRETCH, BASELINE, AUTO
}
enum JustifyContentMode {
START, CENTER, END, BETWEEN, AROUND, EVENLY
}Examples:
VerticalLayout layout = new VerticalLayout();
layout.setSpacing(true);
layout.setPadding(true);
layout.setAlignItems(Alignment.CENTER);
layout.add(new H1("Welcome"), new Button("Start"));
HorizontalLayout toolbar = new HorizontalLayout();
toolbar.setWidthFull();
toolbar.setJustifyContentMode(JustifyContentMode.BETWEEN);
toolbar.add(new Button("New"), new Button("Edit"), new Button("Delete"));class AppLayout extends Component {
AppLayout();
void addToNavbar(Component... components);
void addToDrawer(Component... components);
void setPrimarySection(Section section);
void setDrawerOpened(boolean opened);
}
enum AppLayout.Section {
NAVBAR, DRAWER
}
class DrawerToggle extends Button {
DrawerToggle();
}Example:
@Route("")
public class MainLayout extends AppLayout {
public MainLayout() {
DrawerToggle toggle = new DrawerToggle();
H1 title = new H1("My Application");
addToNavbar(toggle, title);
SideNav nav = new SideNav();
nav.addItem(new SideNavItem("Home", HomeView.class));
nav.addItem(new SideNavItem("Products", ProductsView.class));
addToDrawer(nav);
}
}class FormLayout extends Component implements HasComponents, HasStyle, HasSize {
FormLayout();
void setResponsiveSteps(ResponsiveStep... steps);
void setColspan(Component component, int colspan);
}
class FormLayout.ResponsiveStep {
ResponsiveStep(String minWidth, int columns);
ResponsiveStep(String minWidth, int columns, LabelsPosition labelsPosition);
}
enum LabelsPosition {
TOP, ASIDE
}Example:
FormLayout formLayout = new FormLayout();
formLayout.setResponsiveSteps(
new FormLayout.ResponsiveStep("0", 1),
new FormLayout.ResponsiveStep("500px", 2)
);
TextField firstName = new TextField("First Name");
TextField lastName = new TextField("Last Name");
TextArea comments = new TextArea("Comments");
formLayout.add(firstName, lastName);
formLayout.add(comments);
formLayout.setColspan(comments, 2);class SplitLayout extends Component {
SplitLayout();
SplitLayout(Orientation orientation);
SplitLayout(Component primary, Component secondary);
void addToPrimary(Component component);
void addToSecondary(Component component);
void setSplitterPosition(double position);
}
enum SplitLayout.Orientation {
HORIZONTAL, VERTICAL
}
class Accordion extends Component {
Accordion();
AccordionPanel add(String summary, Component content);
Accordion open(AccordionPanel panel);
}
class AccordionPanel extends Component {
AccordionPanel();
AccordionPanel(String summary, Component content);
void setSummaryText(String summary);
void addContent(Component... components);
void setOpened(boolean opened);
}
class Details extends Component {
Details();
Details(String summary, Component content);
void setOpened(boolean opened);
}Examples:
SplitLayout split = new SplitLayout();
split.addToPrimary(new Div(new H3("Left Panel")));
split.addToSecondary(new Div(new H3("Right Panel")));
split.setSplitterPosition(30);
Accordion accordion = new Accordion();
accordion.add("Personal", new VerticalLayout(
new TextField("Name"), new EmailField("Email")
));
accordion.add("Address", new VerticalLayout(
new TextField("Street"), new TextField("City")
));class Card extends Div {
Card();
Card(Component... components);
void setTitle(Component title);
}
class Scroller extends Component implements HasComponents, HasStyle, HasSize {
Scroller();
Scroller(Component content);
void setScrollDirection(ScrollDirection scrollDirection);
}
enum Scroller.ScrollDirection {
VERTICAL, HORIZONTAL, BOTH, NONE
}
class FlexLayout extends Component implements HasComponents, HasStyle, HasSize {
FlexLayout();
FlexLayout(Component... components);
void setFlexDirection(FlexDirection flexDirection);
void setJustifyContentMode(JustifyContentMode mode);
void setAlignItems(Alignment alignItems);
void setFlexGrow(double flexGrow, Component... components);
}
enum FlexLayout.FlexDirection {
ROW, ROW_REVERSE, COLUMN, COLUMN_REVERSE
}Examples:
Card card = new Card();
card.add(new H3("Product"), new Paragraph("Description"), new Button("Buy"));
Scroller scroller = new Scroller(longContent);
scroller.setHeight("400px");
scroller.setScrollDirection(Scroller.ScrollDirection.VERTICAL);Install with Tessl CLI
npx tessl i tessl/maven-com-vaadin--vaadin-core