Package 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
    @Deprecated
@Tag("vaadin-split-layout")
@NpmPackage(value="@vaadin/polymer-legacy-adapter",
            version="23.5.12")
@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
    Deprecated.
    since v23.3, generated classes will be removed in v24.

    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()
        Deprecated.

    • Method Detail

      • getOrientationString

        @Deprecated
protected String getOrientationString()
        Deprecated.
        since v23.3, generated classes will be removed in v24.

        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

        @Deprecated
protected void setOrientation​(String orientation)
        Deprecated.
        since v23.3, generated classes will be removed in v24.

        Description copied from corresponding location in WebComponent:

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

        Parameters:
        orientation - the String value to set

      • addToPrimary

        @Deprecated
protected void addToPrimary​(Component... components)
        Deprecated.
        since v23.3, generated classes will be removed in v24.
        Adds the given components as children of this component at the slot 'primary'.
        Parameters:
        components - The components to add.
        See Also:
        MDN page about slots, Spec website about slots

      • addToSecondary

        @Deprecated
protected void addToSecondary​(Component... components)
        Deprecated.
        since v23.3, generated classes will be removed in v24.
        Adds the given components as children of this component at the slot 'secondary'.
        Parameters:
        components - The components to add.
        See Also:
        MDN page about slots, Spec website about slots

      • remove

        @Deprecated
protected void remove​(Component... components)
        Deprecated.
        since v23.3, generated classes will be removed in v24.
        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

        @Deprecated
protected void removeAll()
        Deprecated.
        since v23.3, generated classes will be removed in v24.
        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.