Examples with FlexLayout com.vaadin.flow.component.orderedlayout.FlexLayout used on opensource projects

Example 6 with FlexLayout

use of com.vaadin.flow.component.orderedlayout.FlexLayout in project iesi by metadew.

the class LoginScreen method buildUI.

private void buildUI() {
    setSizeFull();
    setClassName("login-screen");
    // login form, centered in the available part of the screen
    LoginForm loginForm = new LoginForm();
    loginForm.addLoginListener(this::login);
    loginForm.addForgotPasswordListener(event -> Notification.show("Contact your framework administrator"));
    // layout to center login form when there is sufficient screen space
    FlexLayout centeringLayout = new FlexLayout();
    centeringLayout.setSizeFull();
    centeringLayout.setJustifyContentMode(JustifyContentMode.CENTER);
    centeringLayout.setAlignItems(Alignment.CENTER);
    centeringLayout.add(loginForm);
    // information text about logging in
    Component loginInformation = buildLoginInformation();
    add(loginInformation);
    add(centeringLayout);
}

Example 7 with FlexLayout

use of com.vaadin.flow.component.orderedlayout.FlexLayout in project vaadin-app-layout by appreciated.

the class AppBarBuilder method build.

@Override
public FlexLayout build() {
    FlexLayout layout = new FlexLayout(components.toArray(new Component[0]));
    layout.getStyle().set("flex-direction", "var(--app-layout-app-bar-flex-direction)");
    layout.setWidthFull();
    layout.setAlignItems(FlexComponent.Alignment.CENTER);
    return layout;
}

Example 8 with FlexLayout

use of com.vaadin.flow.component.orderedlayout.FlexLayout in project docs by vaadin.

the class SelectCustomRendererLabel method createPersonRenderer.

private static ComponentRenderer<FlexLayout, Person> createPersonRenderer() {
    return new ComponentRenderer<>(person -> {
        FlexLayout wrapper = new FlexLayout();
        wrapper.setAlignItems(FlexComponent.Alignment.CENTER);
        // NOTE
        // We are using inline styles here to keep the example simple.
        // We recommend placing CSS in a separate style sheet and to
        // encapsulating the styling in a new component.
        Image image = new Image();
        image.setSrc(person.getPictureUrl());
        image.setAlt("Portrait of " + person.getFirstName() + " " + person.getLastName());
        image.setWidth("var(--lumo-size-m)");
        image.getStyle().set("margin-right", "var(--lumo-space-s)");
        Div info = new Div();
        info.setText(person.getFirstName() + " " + person.getLastName());
        Div profession = new Div();
        profession.setText(person.getProfession());
        profession.getStyle().set("font-size", "var(--lumo-font-size-s)");
        profession.getStyle().set("color", "var(--lumo-secondary-text-color)");
        info.add(profession);
        wrapper.add(image, info);
        return wrapper;
    });
}

Example 9 with FlexLayout

use of com.vaadin.flow.component.orderedlayout.FlexLayout in project bookstore-example by vaadin.

the class LoginScreen method buildUI.

private void buildUI() {
    setSizeFull();
    setClassName("login-screen");
    // login form, centered in the available part of the screen
    LoginForm loginForm = new LoginForm();
    loginForm.addLoginListener(this::login);
    loginForm.addForgotPasswordListener(event -> Notification.show("Hint: same as username"));
    // layout to center login form when there is sufficient screen space
    FlexLayout centeringLayout = new FlexLayout();
    centeringLayout.setSizeFull();
    centeringLayout.setJustifyContentMode(JustifyContentMode.CENTER);
    centeringLayout.setAlignItems(Alignment.CENTER);
    centeringLayout.add(loginForm);
    // information text about logging in
    Component loginInformation = buildLoginInformation();
    add(loginInformation);
    add(centeringLayout);
}

Example 10 with FlexLayout

use of com.vaadin.flow.component.orderedlayout.FlexLayout in project furms by unity-idm.

the class SitesView method addTable.

private void addTable() {
    FlexLayout tableLayout = new FlexLayout();
    tableLayout.setWidthFull();
    List<SiteGridItem> sites = fetchSites();
    DenseGrid<SiteGridItem> siteGrid = new DenseGrid<>(SiteGridItem.class);
    siteGrid.setItems(sites);
    Binder<SiteGridItem> siteBinder = new Binder<>(SiteGridItem.class);
    Editor<SiteGridItem> siteEditor = siteGrid.getEditor();
    siteEditor.setBinder(siteBinder);
    siteEditor.setBuffered(true);
    siteEditor.addOpenListener(event -> onEditorOpen(event, siteBinder));
    siteEditor.addCloseListener(event -> onEditorClose(siteBinder));
    siteGrid.addComponentColumn(site -> new RouterLink(site.getName(), SitesAdminsView.class, site.getId())).setHeader(getTranslation("view.sites.main.grid.column.name")).setKey("name").setSortable(true).setComparator(SiteGridItem::getName).setEditorComponent(addEditForm(siteEditor));
    siteGrid.addComponentColumn(site -> createLastColumnContent(site, siteGrid)).setHeader(getTranslation("view.sites.main.grid.column.actions")).setKey("actions").setEditorComponent(addEditButtons(siteEditor)).setTextAlign(END);
    tableLayout.add(siteGrid);
    getContent().add(tableLayout);
}