com.github.fluorumlabs.disconnect.vaadin.SplitLayout Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of disconnect-vaadin Show documentation
Vaadin components bindings for Disconnect Zero
The newest version!
package com.github.fluorumlabs.disconnect.vaadin;

import com.github.fluorumlabs.disconnect.core.annotations.WebComponent;
import com.github.fluorumlabs.disconnect.polymer.mixins.HasGestureEventListeners;
import com.github.fluorumlabs.disconnect.vaadin.constants.Orientation;
import com.github.fluorumlabs.disconnect.vaadin.elements.SplitLayoutElement;
import com.github.fluorumlabs.disconnect.vaadin.mixins.HasThemableMixin;
import com.github.fluorumlabs.disconnect.vaadin.types.ThemeVariant;
import com.github.fluorumlabs.disconnect.zero.component.*;
import com.github.fluorumlabs.disconnect.zero.observable.ObservableEvent;
import js.extras.JsEnum;
import js.web.dom.Event;

import javax.annotation.Nullable;

/**
 * <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 "
 * vertical":
 *
 * 
<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 = "vertical";.
 *
 * 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
 */
@WebComponent
public class SplitLayout extends AbstractComponent
		implements HasThemableMixin,
		HasGestureEventListeners,
		HasSlots,
		HasStyle, HasComponents> {
	public SplitLayout() {
		super(SplitLayoutElement.TAGNAME());
	}

	/**
	 * The split layout's orientation. Possible values are: horizontal|vertical.
	 */
	@Nullable
	public Orientation orientation() {
		return getNode().getOrientation();
	}

	/**
	 * The split layout's orientation. Possible values are: horizontal|vertical.
	 */
	public SplitLayout orientation(Orientation orientation) {
		getNode().setOrientation(orientation);
		return this;
	}

	/**
	 * Fired when the splitter is dragged. Non-bubbling. Fired for the splitter
	 * element and any nested elements with IronResizableBehavior.
	 */
	public ObservableEvent ironResizeEvent() {
		return createEvent("iron-resize");
	}

	/**
	 * Fired after dragging the splitter have ended.
	 */
	public ObservableEvent splitterDragendEvent() {
		return createEvent("splitter-dragend");
	}

	public HasSlots.Container primarySlot() {
		return slotted("primary");
	}

	public HasSlots.Container secondarySlot() {
		return slotted("secondary");
	}

	public abstract static class Variant extends ThemeVariant {
		public static final Variant SMALL = JsEnum.of("small");
		public static final Variant MINIMAL = JsEnum.of("minimal");

	}

}
Part name	Description	Theme for Element
`splitter`	Split element	vaadin-split-layout
`handle`	The handle of the splitter	vaadin-split-layout