PCUI API Reference - v5.2.0
    Preparing search index...

    Class Container

    A container is the basic building block for Elements that are grouped together. A container can contain any other element including other containers.

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Accessors

    alignItems alignSelf binding class dom domContent enabled error flex flexBasis flexDirection flexGrow flexShrink flexWrap grid height hidden hiddenToRoot ignoreParent justifyContent justifySelf parent readOnly resizable resizeMax resizeMin scrollable style tabIndex width

    Methods

    _buildDomNode append appendAfter appendBefore buildDom clear destroy flash forEachChild link move prepend remove resize unlink create register unregister

    Events

    EVENT_APPEND EVENT_CLICK EVENT_DESTROY EVENT_DISABLE EVENT_ENABLE EVENT_HIDE EVENT_HIDE_TO_ROOT EVENT_HOVER EVENT_HOVER_END EVENT_PARENT EVENT_READ_ONLY EVENT_REMOVE EVENT_RESIZE EVENT_SCROLL EVENT_SHOW EVENT_SHOW_TO_ROOT

    Constructors

    Accessors

    • get alignItems(): string

      Gets the align-items CSS property.

      Returns string

    • set alignItems(value: string): void

      Sets the align-items CSS property.

      Parameters

      • value: string

      Returns void

    • get alignSelf(): string

      Gets the align-self CSS property.

      Returns string

    • set alignSelf(value: string): void

      Sets the align-self CSS property.

      Parameters

      • value: string

      Returns void

    • get enabled(): boolean

      Gets whether the Element or its parent chain is enabled or not.

      Returns boolean

    • set enabled(value: boolean): void

      Sets whether the Element or its parent chain is enabled or not. Defaults to true.

      Parameters

      • value: boolean

      Returns void

    • get error(): boolean

      Gets whether the Element is in an error state.

      Returns boolean

    • set error(value: boolean): void

      Sets whether the Element is in an error state.

      Parameters

      • value: boolean

      Returns void

    • get flexBasis(): string

      Gets the flex-basis CSS property.

      Returns string

    • set flexBasis(value: string): void

      Sets the flex-basis CSS property.

      Parameters

      • value: string

      Returns void

    • get flexDirection(): string

      Gets the flex-direction CSS property.

      Returns string

    • set flexDirection(value: string): void

      Sets the flex-direction CSS property.

      Parameters

      • value: string

      Returns void

    • get flexShrink(): string

      Gets the flex-shrink CSS property.

      Returns string

    • set flexShrink(value: string): void

      Sets the flex-shrink CSS property.

      Parameters

      • value: string

      Returns void

    • get height(): number

      Gets the height of the Element in pixels.

      Returns number

    • set height(value: string | number): void

      Sets the height of the Element in pixels. Can also be an empty string to remove it.

      Parameters

      • value: string | number

      Returns void

    • get hidden(): boolean

      Gets whether the Element is hidden.

      Returns boolean

    • set hidden(value: boolean): void

      Sets whether the Element is hidden.

      Parameters

      • value: boolean

      Returns void

    • get hiddenToRoot(): boolean

      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.

      Returns boolean

    • get ignoreParent(): boolean

      Gets whether the Element will ignore parent events & variable states.

      Returns boolean

    • set ignoreParent(value: boolean): void

      Sets whether the Element will ignore parent events & variable states.

      Parameters

      • value: boolean

      Returns void

    • get justifyContent(): string

      Gets the justify-content CSS property.

      Returns string

    • set justifyContent(value: string): void

      Sets the justify-content CSS property.

      Parameters

      • value: string

      Returns void

    • get justifySelf(): string

      Gets the justify-self CSS property.

      Returns string

    • set justifySelf(value: string): void

      Sets the justify-self CSS property.

      Parameters

      • value: string

      Returns void

    • get readOnly(): boolean

      Gets whether the Element is read only.

      Returns boolean

    • set readOnly(value: boolean): void

      Sets whether the Element is read only.

      Parameters

      • value: boolean

      Returns void

    • get resizable(): string

      Gets whether the Element is resizable and where the resize handle is located.

      Returns string

    • set resizable(value: string): void

      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.

      Parameters

      • value: string

      Returns void

    • get tabIndex(): number

      Gets the tabIndex of the Element.

      Returns number

    • set tabIndex(value: number): void

      Sets the tabIndex of the Element.

      Parameters

      • value: number

      Returns void

    • get width(): number

      Gets the width of the Element in pixels.

      Returns number

    • set width(value: string | number): void

      Sets the width of the Element in pixels. Can also be an empty string to remove it.

      Parameters

      • value: string | number

      Returns void

    Methods

    Protected_buildDomNode

    • _buildDomNode(node: { children?: any; root?: any; [x: string]: any }): Container

      If 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.

      Parameters

      • node: { children?: any; root?: any; [x: string]: any }

        The current element in the dom structure which must be recursively traversed and appended to its parent.

        • [x: string]: any
        • Optionalchildren?: any

          The children of the root node.

        • Optionalroot?: any

          The root node of the dom structure.

      Returns Container

      The recursively appended element node.

    • Appends an element to the container just after the specified reference element.

      Parameters

      • element: any

        The element to append.

      • referenceElement: any

        The element after which the element will be appended.

      Returns void

    • Appends an element to the container before the specified reference element.

      Parameters

      • element: any

        The element to append.

      • referenceElement: any

        The element before which the element will be appended.

      Returns void

    • 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.

      Parameters

      • dom: any[]

        An array of child pcui elements to append to this container.

      Returns void

      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.

      Parameters

      • fn: (child: Element, index: number) => false | void

        The function to call for each child element.

      Returns void

    • Links the specified observers and paths to the Element's data binding.

      Parameters

      • observers: Observer | Observer[]

        An array of observers or a single observer.

      • paths: string | string[]

        A path for the observer(s) or an array of paths that maps to each separate observer.

      Returns void

    • Moves the specified child at the specified index.

      Parameters

      • element: Element

        The element to move.

      • index: number

        The index to move the element to.

      Returns void

    • Inserts an element in the beginning of the container.

      Parameters

      • element: any

        The element to prepend.

      Returns void

    • Resize the container.

      Parameters

      • x: number = 0

        The number of pixels to resize the width.

      • y: number = 0

        The number of pixels to resize the height.

      Returns void

    • Creates a new Element of the desired type.

      Parameters

      • type: string

        The type of the Element (registered by Element#register).

      • args: ElementArgs

        Arguments for the Element.

      Returns any

      The new Element or undefined if type is not found.

    • Type Parameters

      Parameters

      • type: string

        The type we want to reference this Element by.

      • cls: Object

        The actual class of the Element.

      • OptionaldefaultArguments: any

        Default arguments when creating this type.

      Returns void

    Events

    EVENT_APPEND: "append" = 'append'

    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);
    });
    EVENT_CLICK: "click" = 'click'

    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');
    });
    EVENT_DESTROY: "destroy" = 'destroy'

    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');
    });
    EVENT_DISABLE: "disable" = 'disable'

    Fired when the Element gets disabled.

    const element = new Element();
    element.on('disable', () => {
        console.log('Element disabled');
    });
    EVENT_ENABLE: "enable" = 'enable'

    Fired when the Element gets enabled.

    const element = new Element();
    element.on('enable', () => {
        console.log('Element enabled');
    });
    EVENT_HIDE: "hide" = 'hide'

    Fired when the Element gets hidden.

    const element = new Element();
    element.on('hide', () => {
        console.log('Element hidden');
    });
    EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'

    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');
    });
    EVENT_HOVER: "hover" = 'hover'

    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');
    });
    EVENT_HOVER_END: "hoverend" = 'hoverend'

    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');
    });
    EVENT_PARENT: "parent" = 'parent'

    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}`);
    });
    EVENT_READ_ONLY: "readOnly" = 'readOnly'

    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'}`);
    });
    EVENT_REMOVE: "remove" = 'remove'

    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);
    });
    EVENT_RESIZE: "resize" = 'resize'

    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');
    });
    EVENT_SCROLL: "scroll" = 'scroll'

    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);
    });
    EVENT_SHOW: "show" = 'show'

    Fired when the Element stops being hidden.

    const element = new Element();
    element.on('show', () => {
        console.log('Element shown');
    });
    EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'

    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');
    });

    Settings

    Member Visibility

    On This Page

    Constructors
    Accessors
    Methods
    Events