split-layoutpackage.src.vaadin-split-layout.js Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of vaadin-webcomponents Show documentation
Mvnpm composite: Vaadin webcomponents
The newest version!
/**
 * @license
 * Copyright (c) 2016 - 2024 Vaadin Ltd.
 * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { SplitLayoutMixin } from './vaadin-split-layout-mixin.js';
import { splitLayoutStyles } from './vaadin-split-layout-styles.js';

registerStyles('vaadin-split-layout', splitLayoutStyles, { moduleId: 'vaadin-split-layout-styles' });

/**
 * `` is a Web Component implementing a split layout for two
 * content elements with a draggable splitter between them.
 *
 * ```html
 * 
 *   First content element
 *   Second content element
 * 
 * ```
 *
 * ### 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 `"vertical"`:
 *
 * ```html
 * 
 *   Content on the top
 *   Content on the bottom
 * 
 * ```
 *
 * ### Layouts Combination
 *
 * For the layout contents, we usually use `` 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 | Theme for Element
 * ----------------|----------------|----------------
 * `splitter` | Split element | vaadin-split-layout
 * `handle` | The handle of the splitter | vaadin-split-layout
 *
 * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
 *
 * @fires {Event} splitter-dragend - Fired after dragging the splitter have ended.
 *
 * @customElement
 * @extends HTMLElement
 * @mixes ElementMixin
 * @mixes SplitLayoutMixin
 * @mixes ThemableMixin
 */
class SplitLayout extends SplitLayoutMixin(ElementMixin(ThemableMixin(PolymerElement))) {
  static get template() {
    return html`
      
      
        
      
      
    `;
  }

  static get is() {
    return 'vaadin-split-layout';
  }

  /**
   * Fired after dragging the splitter have ended.
   *
   * @event splitter-dragend
   */
}

defineCustomElement(SplitLayout);

export { SplitLayout };