CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/maven-com-vaadin--vaadin-core

Vaadin Platform (vaadin-core) - Core component of the Vaadin web framework platform

Overview
Eval results
Files

layouts.mddocs/

Layouts

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

Basic Layouts

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"));

App Layout

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);
    }
}

Form Layout

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

Split & Accordion

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")
));

Card & Scroller

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

docs

advanced.md

components.md

core-framework.md

data-integration.md

index.md

layouts.md

security.md

themes-styling.md

tile.json