@NpmPackage(value="@vaadin/vaadin-split-layout", version="4.3.1") 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>
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.
<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.
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);
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");
For notification on when the user has resized the split position, use the
addSplitterDragendListener(ComponentEventListener).
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 |
SplitLayout.Orientation
numeration of all available orientation for VaadinSplitLayout component
|
GeneratedVaadinSplitLayout.IronResizeEvent<R extends GeneratedVaadinSplitLayout<R>>, GeneratedVaadinSplitLayout.SplitterDragendEvent<R extends GeneratedVaadinSplitLayout<R>>| Constructor and Description |
|---|
SplitLayout()
Constructs an empty VaadinSplitLayout.
|
SplitLayout(Component primaryComponent,
Component secondaryComponent)
Constructs a VaadinSplitLayout with the given initial components to set
to the primary and secondary splits.
|
| Modifier and Type | Method and Description |
|---|---|
Registration |
addSplitterDragendListener(ComponentEventListener<GeneratedVaadinSplitLayout.SplitterDragendEvent<SplitLayout>> listener)
Adds a listener for the
splitter-dragend event, which is fired
when the user has stopped resizing the splitter with drag and drop. |
void |
addToPrimary(Component... components)
Sets the given components to the primary split of this layout, i.e.
|
void |
addToSecondary(Component... components)
Sets the given components to the secondary split of this layout, i.e.
|
SplitLayout.Orientation |
getOrientation()
Get the orientation of the SplitLayout.
|
Component |
getPrimaryComponent()
Get the component currently set to the primary split.
|
Component |
getSecondaryComponent()
Get the component currently set to the secondary split.
|
void |
remove(Component... components)
Removes the given child components from this component.
|
void |
removeAll()
Removes the primary and the secondary components.
|
void |
setOrientation(SplitLayout.Orientation orientation)
Set the orientation of the SplitLayout.
|
void |
setPrimaryStyle(String styleName,
String value)
Set a style to the component in the primary split.
|
void |
setSecondaryStyle(String styleName,
String value)
Set a style to the component in the secondary split.
|
void |
setSplitterPosition(double position)
Sets the relative position of the splitter in percentages.
|
addIronResizeListener, addThemeVariants, getOrientationString, removeThemeVariants, setOrientationaddListener, 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, waitgetCssSize, getHeight, getHeightUnit, getMaxHeight, getMaxWidth, getMinHeight, getMinWidth, getWidth, getWidthUnit, setHeight, setHeight, setHeightFull, setMaxHeight, setMaxHeight, setMaxWidth, setMaxWidth, setMinHeight, setMinHeight, setMinWidth, setMinWidth, setSizeFull, setSizeUndefined, setWidth, setWidth, setWidthFullgetElementaddClassName, addClassNames, getClassName, getClassNames, getStyle, hasClassName, removeClassName, removeClassNames, setClassName, setClassNameaddClickListener, addClickShortcutaddThemeName, addThemeNames, getThemeName, getThemeNames, hasThemeName, removeThemeName, removeThemeNames, setThemeName, setThemeNameaddAttachListeneraddDetachListenerpublic SplitLayout()
public SplitLayout(Component primaryComponent, Component secondaryComponent)
primaryComponent - the component set to the primary splitsecondaryComponent - the component set to the secondary splitpublic void setOrientation(SplitLayout.Orientation orientation)
Default value is SplitLayout.Orientation.HORIZONTAL.
orientation - the orientation of the SplitLayout. Valid enumerate values are
VERTICAL and HORIZONTAL, never nullpublic SplitLayout.Orientation getOrientation()
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.
orientation property of the SplitLayout.public void addToPrimary(Component... components)
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.
addToPrimary in class GeneratedVaadinSplitLayout<SplitLayout>components - The components to add.setOrientation(Orientation)public Component getPrimaryComponent()
public void addToSecondary(Component... components)
Note: Calling this method with multiple arguments will wrap the
components inside a <div> element.
addToSecondary in class GeneratedVaadinSplitLayout<SplitLayout>components - The components to add.setOrientation(Orientation)public Component getSecondaryComponent()
public void setSplitterPosition(double position)
position - the relative position of the splitter, in percentagespublic void setPrimaryStyle(String styleName, String value)
styleName - name of the style to setvalue - the value to setpublic void setSecondaryStyle(String styleName, String value)
styleName - name of the style to setvalue - the value to setpublic void remove(Component... components)
GeneratedVaadinSplitLayoutremove in class GeneratedVaadinSplitLayout<SplitLayout>components - The components to remove.public void removeAll()
removeAll in class GeneratedVaadinSplitLayout<SplitLayout>public Registration addSplitterDragendListener(ComponentEventListener<GeneratedVaadinSplitLayout.SplitterDragendEvent<SplitLayout>> listener)
splitter-dragend event, which is fired
when the user has stopped resizing the splitter with drag and drop.addSplitterDragendListener in class GeneratedVaadinSplitLayout<SplitLayout>listener - the listener to addCopyright © 2025. All rights reserved.