elements in the examples, although you can use any other elements as well. For instance, in order to have a nested vertical split layout inside a horizontal one, you can include as a content element inside another split layout:
First content element
Second content element
Third content element
 You can also trigger the vertical mode in JavaScript by setting the property: splitLayout.orientation = "vertical";. Split Layout Element Height 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:
First content element
Second content 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. In the following example, the is resized to fill the entire viewport, and the element is set to take 100% height of the :
First
Second
 Alternatively, you can use a flexbox layout to make fill up the parent:
First
Second
 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 elements affects the initial splitter position for the horizontal layouts, while height affects the vertical ones. Note that when the total size of the content elements 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:
Three fourths
One fourth
 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:
First
Second
 Resize Notification This element implements IronResizableBehavior to notify the nested resizables when the splitter is dragged. In order to define a resizable and receive that notification in a nested element, include IronResizableBehavior and listen for the iron-resize event. 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 ">
Content on the bottom
Content on the top
elements in the examples, although you can use any other elements as well. For instance, in order to have a nested vertical split layout inside a horizontal one, you can include as a content element inside another split layout:
First content element
Second content element
Third content element
 You can also trigger the vertical mode in JavaScript by setting the property: splitLayout.orientation = "vertical";. Split Layout Element Height 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:
First content element
Second content 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. In the following example, the is resized to fill the entire viewport, and the element is set to take 100% height of the :
First
Second
 Alternatively, you can use a flexbox layout to make fill up the parent:
First
Second
 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 elements affects the initial splitter position for the horizontal layouts, while height affects the vertical ones. Note that when the total size of the content elements 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:
Three fourths
One fourth
 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:
First
Second
 Resize Notification This element implements IronResizableBehavior to notify the nested resizables when the splitter is dragged. In order to define a resizable and receive that notification in a nested element, include IronResizableBehavior and listen for the iron-resize event. 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 ">
Content on the bottom
Content on the top
com.vaadin.flow.component.splitlayout.GeneratedVaadinSplitLayout API 23.1.17 | Vaadin
Contact us
Create app
You're viewing an older version of Vaadin JavaDoc. Please see version 24.7.0 for the latest.
com.vaadin.flow.component.splitlayout.

Class GeneratedVaadinSplitLayout<R extends GeneratedVaadinSplitLayout<R>>

  • All Implemented Interfaces:

    AttachNotifier, ClickNotifier<R>, DetachNotifier, HasElement, HasStyle, HasTheme, Serializable

    Direct Known Subclasses:

    SplitLayout

    @Tag("vaadin-split-layout")
@NpmPackage(value="@vaadin/polymer-legacy-adapter",
            version="23.1.15")
@JsModule("@vaadin/polymer-legacy-adapter/style-modules.js") @JsModule("@vaadin/split-layout/src/vaadin-split-layout.js")
public abstract class GeneratedVaadinSplitLayout<R extends GeneratedVaadinSplitLayout<R>>
extends Component
implements HasStyle, ClickNotifier<R>, HasTheme

    Description copied from corresponding location in WebComponent:

    <vaadin-split-layout> is a Web Component implementing a split layout for two content elements with a draggable splitter between them.

    <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 setting the orientation attribute to &quot;vertical&quot;:

    <vaadin-split-layout orientation="vertical"> <div>Content on the top</div> <div>Content on the bottom</div> </vaadin-split-layout>

    Layouts Combination

    For the layout contents, we usually use <div> elements in the examples, although you can use any other elements as well.

    For instance, in order to have a nested vertical split layout inside a horizontal one, you can include <vaadin-split-layout> as a content element inside another split layout:

    <vaadin-split-layout> <div>First content element</div> <vaadin-split-layout orientation="vertical"> <div>Second content element</div> <div>Third content element</div> </vaadin-split-layout> </vaadin-split-layout>

    You can also trigger the vertical mode in JavaScript by setting the property: splitLayout.orientation = &quot;vertical&quot;;.

    Split Layout Element Height

    <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:

    <vaadin-split-layout style="height: 200px;"> <div>First content element</div> <div>Second content element</div> </vaadin-split-layout>

    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. In the following example, the <body> is resized to fill the entire viewport, and the <vaadin-split-layout> element is set to take 100% height of the <body>:

    <body style="height: 100vh; margin: 0;"> <vaadin-split-layout style="height: 100%;"> <div>First</div> <div>Second</div> </vaadin-split-layout> </body>

    Alternatively, you can use a flexbox layout to make <vaadin-split-layout> fill up the parent:

    <body style="height: 100vh; margin: 0; display: flex;"> <vaadin-split-layout style="flex: 1;"> <div>First</div> <div>Second</div> </vaadin-split-layout> </body>

    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 elements affects the initial splitter position for the horizontal layouts, while height affects the vertical ones.

    Note that when the total size of the content elements 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:

    <vaadin-split-layout> <div style="width: 75%;">Three fourths</div> <div style="width: 25%;">One fourth</div> </vaadin-split-layout>

    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:

    <vaadin-split-layout> <div style="min-width: 50px; max-width: 150px;">First</div> <div>Second</div> </vaadin-split-layout>

    Resize Notification

    This element implements IronResizableBehavior to notify the nested resizables when the splitter is dragged. In order to define a resizable and receive that notification in a nested element, include IronResizableBehavior and listen for the iron-resize event.

    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

    See Also:

    Serialized Form

    • Constructor Detail

      • GeneratedVaadinSplitLayout

        public GeneratedVaadinSplitLayout()

    • Method Detail

      • addThemeVariants

        public void addThemeVariants​(SplitLayoutVariant... variants)

        Adds theme variants to the component.

        Parameters:

        variants - theme variants to add

      • removeThemeVariants

        public void removeThemeVariants​(SplitLayoutVariant... variants)

        Removes theme variants from the component.

        Parameters:

        variants - theme variants to remove

      • getOrientationString

        protected String getOrientationString()

        Description copied from corresponding location in WebComponent:

        The split layout's orientation. Possible values are: horizontal|vertical.

        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 from the webcomponent

      • setOrientation

        protected void setOrientation​(String orientation)

        Description copied from corresponding location in WebComponent:

        The split layout's orientation. Possible values are: horizontal|vertical.

        Parameters:

        orientation - the String value to set

      • remove

        protected void remove​(Component... components)

        Removes the given child components from this component.

        Parameters:

        components - The components to remove.

        Throws:

        IllegalArgumentException - if any of the components is not a child of this component.

      • removeAll

        protected void removeAll()

        Removes all contents from this component, this includes child components, text content as well as child elements that have been added directly to this component using the Element API.