@Tag(value="vaadin-split-layout") @JsModule(value="@vaadin/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>
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 "vertical":
<vaadin-split-layout orientation="vertical"> <div>Content on the top</div> <div>Content on the bottom</div> </vaadin-split-layout>
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 = "vertical";.
<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>
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>
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>
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.
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 |
| Modifier and Type | Class and Description |
|---|---|
static class |
GeneratedVaadinSplitLayout.IronResizeEvent<R extends GeneratedVaadinSplitLayout<R>> |
static class |
GeneratedVaadinSplitLayout.SplitterDragendEvent<R extends GeneratedVaadinSplitLayout<R>> |
| Constructor and Description |
|---|
GeneratedVaadinSplitLayout() |
| Modifier and Type | Method and Description |
|---|---|
protected Registration |
addIronResizeListener(ComponentEventListener<GeneratedVaadinSplitLayout.IronResizeEvent<R>> listener)
Adds a listener for
iron-resize events fired by the webcomponent. |
protected Registration |
addSplitterDragendListener(ComponentEventListener<GeneratedVaadinSplitLayout.SplitterDragendEvent<R>> listener)
Adds a listener for
splitter-dragend events fired by the
webcomponent. |
void |
addThemeVariants(SplitLayoutVariant... variants)
Adds theme variants to the component.
|
protected void |
addToPrimary(Component... components)
Adds the given components as children of this component at the slot
'primary'.
|
protected void |
addToSecondary(Component... components)
Adds the given components as children of this component at the slot
'secondary'.
|
protected String |
getOrientationString()
Description copied from corresponding location in WebComponent:
|
protected void |
remove(Component... components)
Removes the given child components from this component.
|
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. |
void |
removeThemeVariants(SplitLayoutVariant... variants)
Removes theme variants from the component.
|
protected void |
setOrientation(String orientation)
Description copied from corresponding location in WebComponent:
|
addListener, fireEvent, from, get, getChildren, getElement, getEventBus, getId, getLocale, getParent, getTranslation, getTranslation, getTranslation, getTranslation, getUI, hasListener, isAttached, isTemplateMapped, isVisible, onAttach, onDetach, onEnabledStateChanged, set, setElement, setId, setVisibleclone, equals, finalize, getClass, hashCode, notify, notifyAll, toString, wait, wait, waitaddClassName, addClassNames, getClassName, getClassNames, getStyle, hasClassName, removeClassName, removeClassNames, setClassName, setClassNameaddClickListener, addClickShortcutaddThemeName, addThemeNames, getThemeName, getThemeNames, hasThemeName, removeThemeName, removeThemeNames, setThemeName, setThemeNamegetElementaddAttachListeneraddDetachListenerpublic void addThemeVariants(SplitLayoutVariant... variants)
variants - theme variants to addpublic void removeThemeVariants(SplitLayoutVariant... variants)
variants - theme variants to removeprotected 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.
orientation property from the webcomponentprotected void setOrientation(String orientation)
Description copied from corresponding location in WebComponent:
The split layout's orientation. Possible values are:
horizontal|vertical.
orientation - the String value to setprotected Registration addIronResizeListener(ComponentEventListener<GeneratedVaadinSplitLayout.IronResizeEvent<R>> listener)
iron-resize events fired by the webcomponent.listener - the listenerRegistration for removing the event listenerprotected Registration addSplitterDragendListener(ComponentEventListener<GeneratedVaadinSplitLayout.SplitterDragendEvent<R>> listener)
splitter-dragend events fired by the
webcomponent.listener - the listenerRegistration for removing the event listenerprotected void addToPrimary(Component... components)
components - The components to add.protected void addToSecondary(Component... components)
components - The components to add.protected void remove(Component... components)
components - The components to remove.IllegalArgumentException - if any of the components is not a child of this component.protected void removeAll()
Element API.Copyright © 2025. All rights reserved.