Class Component

Component

A component in its simplest form.

Example

Component.create({
tagName: "hr",
cls: "special"
})

Hierarchy

Constructors

Properties

_cls?: string
_el?: HTMLElement
_itemId: string = ""

Component item ID that can be used to lookup the Component inside a Component with Component.findItem() and Component.findItemIndex();

if stateId is given it will also be used as itemId

_mask: undefined | Mask
_rendered: boolean = false

True when added to the DOM tree

baseCls: string = ""

A base class not configurable. cls can be used to add extra classes leaving this class alone

dataSet: Record<string, any> = {}

Set arbitrary data on a component.

Should be used with caution as this data is not typed.

maskTimeout?: any
parent?: Component

When this item is added to a Component this is set to the parent Component

renderTo?: HTMLElement

Normally components are rendered to its parent component's element. But in some cases like menu's it's desired to render them to the root and position them absolute.

stateId?: string

ID used for storing state of the component in the State storage.

If stateId is given it will also be used as itemId

If not set then the component won't store it's state.

tagName: keyof HTMLElementTagNameMap = "div"

The tagname used for the root HTMLElement of this component

_uniqueID: number = 0

Accessors

  • set attr(attr): void
  • Set attributes of the DOM element

    Parameters

    • attr: Record<string, string>

    Returns void

  • set cls(cls): void
  • Class name to add to element

    Some common classes to add for layout:

    • hbox: Set's flex layout to horizontal boxes. Use flex: n to stretch columns
    • vbox: As above but vertical
    • fit: Fit the parent's size
    • scroll: Set's autoscroll: true
    • pad: Set common padding on the element
    • border-(top|bottom|left|right) to add a border

    Other:

    • goui-fade-in: The component will fade in when show() is used.
    • goui-fade-out: The component will fade out when hide is used.

    Parameters

    • cls: string

    Returns void

  • get itemId(): string
  • Component item ID that can be used to lookup the Component inside a Component with Component.findItem() and Component.findItemIndex();

    if stateId is given it will also be used as itemId

    Returns string

  • set itemId(itemId): void
  • Parameters

    • itemId: string

    Returns void

  • get rendered(): boolean
  • Check if the component has been rendered and added to the DOM tree

    Returns boolean

  • get tabIndex(): number
  • Returns number

  • set tabIndex(tabIndex): void
  • The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating).

    Parameters

    • tabIndex: number

    Returns void

  • get width(): number
  • Returns number

  • set width(width): void
  • Set the width in scalable pixels

    The width is applied in rem units divided by 10. Because the font-size of the html element has a font-size of 62.5% this is equals the amount of pixels, but it can be scaled easily for different themes.

    Parameters

    • width: number

    Returns void

Methods

  • Cascade down the component hierarchy

    Parameters

    • fn: ((comp) => boolean | void)

      When the function returns false then the cascading will be stopped. The current Component will be finished!

        • (comp): boolean | void
        • Parameters

          Returns boolean | void

    Returns Component

  • Find ancestor

    The method traverses the Component's ancestors (heading toward the document root) until it finds one where the given function returns true.

    Parameters

    • fn: ((cmp) => boolean | void)

      When the function returns true the item will be returned. Otherwise it will move up to the next parent.

        • (cmp): boolean | void
        • Parameters

          Returns boolean | void

    Returns undefined | Component

  • Find parent by instance type of the parent

    Type Parameters

    Parameters

    • cls: T

    Returns undefined | InstanceType<T>

    Example

    const form = textField.findAncestorByType(Form);
    
  • Find child by instance type of the parent

    Type Parameters

    Parameters

    • cls: ClassTypeOf<T>

    Returns undefined | T

    Example

    const form = textField.findAncestorByType(Form);
    
  • Find children by instance type of the parent

    Type Parameters

    Parameters

    • cls: ClassTypeOf<T>

    Returns T[]

    Example

    const form = textField.findAncestorByType(Form);
    
  • Protected

    Finds the DOM node in the parent's children to insert before when rendering a child component

    Returns undefined | Node

  • Hide this component

    This sets the "hidden" attribute on the DOM element which set's CSS display:none. You can change this to fade with css class "goui-fade-in" and "goui-fade-out"

    If you want to override this function, please override internalSetHidden instead so the beforeshow and show event fire at the right time.

    Returns boolean

  • Protected

    Overridable method so that the (before)show/hide event fire before and after.

    Parameters

    • hidden: boolean

    Returns void

  • Mask the component to disable user interaction It creates an absolute positioned Mask component. This component should have a non-static position style for this to work.

    Parameters

    • delay: number = 300

    Returns void

  • Render the component

    Parameters

    • Optional parentEl: Node

      The element this componennt will render into

    • Optional insertBefore: Node

      If given, the element will be inserted before this child

    Returns HTMLElement

  • Protected

    Restore state of the component in this function. It's called before render in init().

    Parameters

    Returns void

    See

    saveState();

  • Protected

    Call save start when something relevant to the state changes. Implement buildState() to save relevant state properties and restore it in restoreState()

    stateId must be set on components to be stateful

    Returns void

  • Show the component

    If you want to override this function, please override internalSetHidden instead so the beforeshow and show event fire at the right time.

    Returns boolean

Generated using TypeDoc