Package com.vaadin.flow.component.splitlayout

Class SplitLayout

  • All Implemented Interfaces:
    AttachNotifier, ClickNotifier<SplitLayout>, DetachNotifier, HasElement, HasSize, HasStyle, HasTheme, Serializable
    @NpmPackage(value="@vaadin/split-layout",version="23.0.6") @NpmPackage(value="@vaadin/vaadin-split-layout",version="23.0.6")
public class SplitLayout
extends GeneratedVaadinSplitLayout<SplitLayout>
implements HasSize

    SplitLayout is a component based on the vaadin-split-layout Polymer element implementing a split layout for two content elements with a draggable splitter between them. DOM Example:

    <vaadin-split-layout>
    <div>First content element</div>
    <div>Second content element</div>
    </vaadin-split-layout>

    Horizontal and Vertical Layouts

    By default, the split's orientation is horizontal, meaning that the content elements are positioned side by side in a flex container with a horizontal layout. You can change the split mode to vertical by using the setOrientation(Orientation) with SplitLayout.Orientation.VERTICAL.

    The <vaadin-split-layout> element itself is a flex container. It does not inherit the parent height by default, but rather sets its height depending on the content.

    You can use CSS to set the fixed height for the split layout, as usual with any block element. It is possible to define percentage height as well. Note that you have to set the parent height in order to make percentages work correctly.

    Initial Splitter Position

    The initial splitter position is determined from the sizes of the content elements inside the split layout. Therefore, changing width on the content components affects the initial splitter position for the horizontal layouts, while height affects the vertical ones.

    Note that when the total size of the content component does not fit the layout, the content elements are scaled proportionally.

    When setting initial sizes with relative units, such as percentages, it is recommended to assign the size for both content elements:

    SplitLayout layout = new SplitLayout();

    Label first = new Label("First is 1/4");
    first.setWidth("25%");
    layout.addToPrimary(first);

    Label second = new Label("Second is 3/4");
    second.setWidth("75%");
    layout.addToSecondary(second);

    Size Limits

    The min-width/min-height, and max-width/ max-height CSS size values for the content elements are respected and used to limit the splitter position when it is dragged.

    It is preferred to set the limits only for a single content element, in order to avoid size conflicts:

    SplitLayout layout = new SplitLayout();
    layout.addToPrimary(new Label("First"));
    layout.addToPrimary(new Label("Second with min & max size");
    layout.setSecondaryStyle("min-width", "200px");
    layout.setSecondaryStyle("max-width", "600px");

    Resize Notification

    For notification on when the user has resized the split position, use the addSplitterDragendListener(ComponentEventListener).

    Styling

    The following shadow DOM parts are available for styling:

    Part name Description Theme for Element
    splitter Split element vaadin-split-layout
    handle The handle of the splitter vaadin-split-layout

    See ThemableMixin – how to apply styles for shadow parts

    Author:
    Vaadin Ltd
    See Also:
    Serialized Form

    • Constructor Detail

      • SplitLayout

        public SplitLayout()
        Constructs an empty VaadinSplitLayout.

      • SplitLayout

        public SplitLayout​(Component primaryComponent,
                   Component secondaryComponent)
        Constructs a VaadinSplitLayout with the given initial components to set to the primary and secondary splits.
        Parameters:
        primaryComponent - the component set to the primary split
        secondaryComponent - the component set to the secondary split

    • Method Detail

      • setOrientation

        public void setOrientation​(SplitLayout.Orientation orientation)
        Set the orientation of the SplitLayout.

        Default value is SplitLayout.Orientation.HORIZONTAL.

        Parameters:
        orientation - the orientation of the SplitLayout. Valid enumerate values are VERTICAL and HORIZONTAL, never null

      • getOrientation

        public SplitLayout.Orientation getOrientation()
        Get the orientation of the SplitLayout.

        Default value is SplitLayout.Orientation.HORIZONTAL.

        NOTE: This property is not synchronized automatically from the client side, so the returned value may not be the same as in client side.

        Returns:
        the orientation property of the SplitLayout.

      • addToPrimary

        public void addToPrimary​(Component... components)
        Sets the given components to the primary split of this layout, i.e. the left split if in horizontal mode and the top split if in vertical mode.

        Note: Calling this method with multiple arguments will wrap the components inside a <div> element.

        Note: Removing the primary component through the component API will move the secondary component to the primary split, causing this layout to desync with the server. This is a known issue.

        Overrides:
        addToPrimary in class GeneratedVaadinSplitLayout<SplitLayout>
        Parameters:
        components - The components to add.
        See Also:
        setOrientation(Orientation)

      • getPrimaryComponent

        public Component getPrimaryComponent()
        Get the component currently set to the primary split.
        Returns:
        the primary component, may be null

      • addToSecondary

        public void addToSecondary​(Component... components)
        Sets the given components to the secondary split of this layout, i.e. the right split if in horizontal mode and the bottom split if in vertical mode.

        Note: Calling this method with multiple arguments will wrap the components inside a <div> element.

        Overrides:
        addToSecondary in class GeneratedVaadinSplitLayout<SplitLayout>
        Parameters:
        components - The components to add.
        See Also:
        setOrientation(Orientation)

      • getSecondaryComponent

        public Component getSecondaryComponent()
        Get the component currently set to the secondary split.
        Returns:
        the primary component, may be null

      • setSplitterPosition

        public void setSplitterPosition​(double position)
        Sets the relative position of the splitter in percentages. The given value is used to set how much space is given to the primary component relative to the secondary component. In horizontal mode this is the width of the component and in vertical mode this is the height. The given value will automatically be clamped to the range [0, 100]. Note that when using vertical orientation, this method only works if the split layout has an explicit height, either as an absolute value or as percentage. When using a percentage value, ensure that ancestors have an explicit height as well.
        Parameters:
        position - the relative position of the splitter, in percentages

      • setPrimaryStyle

        public void setPrimaryStyle​(String styleName,
                            String value)
        Set a style to the component in the primary split.
        Parameters:
        styleName - name of the style to set
        value - the value to set

      • setSecondaryStyle

        public void setSecondaryStyle​(String styleName,
                              String value)
        Set a style to the component in the secondary split.
        Parameters:
        styleName - name of the style to set
        value - the value to set