Creates a new Container.
The arguments.
Gets / sets the align-items CSS property.
Gets / sets the align-self CSS property.
Gets / sets the Binding object for the element.
Get the DOMTokenList of the underlying DOM element. This is essentially a shortcut to
element.dom.classList.
Gets the root DOM node for this Element.
The internal DOM element used as a the container of all children. Can be overridden by derived classes.
Gets / sets whether the Element or its parent chain is enabled or not. Defaults to true.
Gets / sets whether the Element is in an error state.
Gets / sets whether the Element supports flex layout.
Gets / sets the flex-basis CSS property.
Gets / sets the flex-direction CSS property.
Gets / sets the flex-grow CSS property.
Gets / sets the flex-shrink CSS property.
Gets / sets the flex-wrap CSS property.
Gets / sets whether the Element supports the grid layout.
Gets / sets the height of the Element in pixels. Can also be an empty string to remove it.
Gets / sets whether the Element is hidden.
Gets whether the Element is hidden all the way up to the root. If the Element itself or any of its parents are hidden then this is true.
Gets / sets whether the Element will ignore parent events & variable states.
Gets / sets the justify-content CSS property.
Gets / sets the justify-self CSS property.
Gets / sets whether the Element is read only.
Gets / sets whether the Element is resizable and where the resize handle is located. Can be one of 'top', 'bottom', 'right', 'left'. Set to null to disable resizing.
Gets / sets the maximum size the Element can take when resized in pixels.
Gets / sets the minimum size the Element can take when resized in pixels.
Gets /sets whether the Element should be scrollable.
Shortcut to Element.dom.style.
Gets / sets the tabIndex of the Element.
Gets / sets the width of the Element in pixels. Can also be an empty string to remove it.
Protected _buildIf the current node contains a root, recursively append its children to this node and return it. Otherwise return the current node. Also add each child to the parent under its keyed name.
The current element in the dom structure which must be recursively traversed and appended to its parent.
Optional children?: anyThe children of the root node.
Optional root?: anyThe root node of the dom structure.
The recursively appended element node.
Takes an array of pcui elements, each of which can contain their own child elements, and appends them to this container. These child elements are traversed recursively using _buildDomNode.
An array of child pcui elements to append to this container.
buildDom([
{
child1: pcui.Label()
},
{
root: {
container1: pcui.Container()
},
children: [
{
child2: pcui.Label()
},
{
child3: pcui.Label()
}
]
}
]);
Iterate over each child element using the supplied function. To early out of the iteration,
return false from the function.
The function to call for each child element.
Links the specified observers and paths to the Element's data binding.
An array of observers or a single observer.
A path for the observer(s) or an array of paths that maps to each separate observer.
Moves the specified child at the specified index.
The element to move.
The index to move the element to.
Removes the specified child element from the container.
The element to remove.
'remove'
Static createCreates a new Element of the desired type.
The type of the Element (registered by Element#register).
Arguments for the Element.
The new Element or undefined if type is not found.
Static registerThe type we want to reference this Element by.
The actual class of the Element.
Optional defaultArguments: anyDefault arguments when creating this type.
Static unregisterStatic Readonly EVENT_Fired when a child Element gets added to the Container.
const container = new Container();
container.on('append', (element: Element) => {
console.log('Element added to container:', element);
});
Static Readonly EVENT_Fired when the mouse is clicked on the Element but only if the Element is enabled. The native DOM MouseEvent is passed as a parameter to the event handler.
const element = new Element();
element.on('click', (evt: MouseEvent) => {
console.log('Element clicked');
});
Static Readonly EVENT_Fired after the element has been destroyed. Both the DOM element and the owner Element instance are passed as parameters to the event handler.
const element = new Element();
element.on('destroy', (dom: HTMLElement, element: Element) => {
console.log('Element destroyed');
});
Static Readonly EVENT_Fired when the Element gets disabled.
const element = new Element();
element.on('disable', () => {
console.log('Element disabled');
});
Static Readonly EVENT_Fired when the Element gets enabled.
const element = new Element();
element.on('enable', () => {
console.log('Element enabled');
});
Static Readonly EVENT_Fired when the Element gets hidden.
const element = new Element();
element.on('hide', () => {
console.log('Element hidden');
});
Static Readonly EVENT_Fired when the Element or any of its parent get hidden.
const element = new Element();
element.on('hideToRoot', () => {
console.log('Element or one of its parents hidden');
});
Static Readonly EVENT_Fired when the mouse starts hovering on the Element. The native DOM MouseEvent is passed as a parameter to the event handler.
const element = new Element();
element.on('hover', (evt: MouseEvent) => {
console.log('Element hovered');
});
Static Readonly EVENT_Fired when the mouse stops hovering on the Element. The native DOM MouseEvent is passed as a parameter to the event handler.
const element = new Element();
element.on('hoverend', (evt: MouseEvent) => {
console.log('Element hover ended');
});
Static Readonly EVENT_Fired when the Element's parent gets set.
const element = new Element();
element.on('parent', (parent: Element) => {
console.log(`Element's parent is now ${parent}`);
});
Static Readonly EVENT_Fired when the readOnly property of an Element changes.
const element = new Element();
element.on('readOnly', (readOnly: boolean) => {
console.log(`Element is now ${readOnly ? 'read only' : 'editable'}`);
});
Static Readonly EVENT_Fired when a child Element gets removed from the Container.
const container = new Container();
container.on('remove', (element: Element) => {
console.log('Element removed from container:', element);
});
Static Readonly EVENT_Fired when the container gets resized using the resize handle.
const container = new Container();
container.on('resize', () => {
console.log('Container resized to:', container.width, container.height, 'px');
});
Static Readonly EVENT_Fired when the container is scrolled. The native DOM scroll event is passed to the event handler.
const container = new Container();
container.on('scroll', (event: Event) => {
console.log('Container scrolled:', event);
});
Static Readonly EVENT_Fired when the Element stops being hidden.
const element = new Element();
element.on('show', () => {
console.log('Element shown');
});
Static Readonly EVENT_Fired when the Element and all of its parents become visible.
const element = new Element();
element.on('showToRoot', () => {
console.log('Element and all of its parents shown');
});
A container is the basic building block for Elements that are grouped together. A container can contain any other element including other containers.