` 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: * * ```html * *

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: * * ```html * *

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 ``: * * ```html * * *

First

Second

* * * ``` * * Alternatively, you can use a flexbox layout to make `` * fill up the parent: * * ```html * * *

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: * * ```html * *

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: * * ```html * *

First

Second

* * ``` * * ### Styling * * The following shadow DOM parts are available for styling: * * Part name | Description * -----------|-------------- * `splitter` | Split element * `handle` | The handle of the splitter * * The following custom CSS properties are available for styling: * * Custom CSS property | * :----------------------------------------------| * | `--vaadin-split-layout-handle-size` | * | `--vaadin-split-layout-handle-target-size` | * | `--vaadin-split-layout-splitter-background` | * | `--vaadin-split-layout-splitter-size` | * | `--vaadin-split-layout-splitter-target-size` | * * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation. * * @fires {Event} splitter-dragend - Fired after dragging the splitter have ended. */ declare class SplitLayout extends SplitLayoutMixin(ElementMixin(ThemableMixin(HTMLElement))) { addEventListener( type: K, listener: (this: SplitLayout, ev: SplitLayoutEventMap[K]) => void, options?: AddEventListenerOptions | boolean, ): void; removeEventListener( type: K, listener: (this: SplitLayout, ev: SplitLayoutEventMap[K]) => void, options?: EventListenerOptions | boolean, ): void; } declare global { interface HTMLElementTagNameMap { 'vaadin-split-layout': SplitLayout; } } export { SplitLayout };