API
API|
@babylonjs/gui|
TextBlock

Class TextBlock

Class used to create text block control

Hierarchy (View Summary)

Index
constructor
adjustWordWrappingHTMLElement animations hoverCursor isFocusInvisible isHitTestVisible isPointerBlocker isSerializable metadata name? onAccessibilityTagChangedObservable onAfterDrawObservable onBeforeDrawObservable onBlurObservable onDirtyObservable onDisposeObservable onEnabledStateChangedObservable onEnterPressedObservable onFocusObservable onIsVisibleChangedObservable onKeyboardEventProcessedObservable onLinesReadyObservable onPointerClickObservable onPointerDownObservable onPointerEnterObservable onPointerMoveObservable onPointerOutObservable onPointerUpObservable onTextChangedObservable onWheelObservable overlapDeltaMultiplier? overlapGroup? parent reuseHTMLForWordWrapping tabIndex uniqueId useBitmapCache wordSplittingFunction AddHeader AllowAlphaInheritance
accessibilityTag alpha applyOutlineToUnderline centerX centerY clipChildren clipContent color descendantsOnlyPadding disabledColor disabledColorItem fixedRatio fixedRatioMasterIsWidth flexGrow flexShrink focusedColor fontFamily fontOffset fontSize fontSizeInPixels fontStyle fontWeight forceResizeWidth gradient height heightInPixels highlightColor highlightLineWidth horizontalAlignment host isDirty isEnabled isHighlighted isReadOnly isVisible left leftInPixels lines lineSpacing lineThrough linkedMesh linkOffsetX linkOffsetXInPixels linkOffsetY linkOffsetYInPixels notRenderable outlineColor outlineWidth paddingBottom paddingBottomInPixels paddingLeft paddingLeftInPixels paddingRight paddingRightInPixels paddingTop paddingTopInPixels resizeToFit rotation scaleX scaleY shadowBlur shadowColor shadowOffsetX shadowOffsetY style text textHorizontalAlignment textVerticalAlignment textWrapping top topInPixels transformCenterX transformCenterY transformedMeasure typeName underline verticalAlignment width widthInPixels wordDivider zIndex HORIZONTAL_ALIGNMENT_CENTER HORIZONTAL_ALIGNMENT_LEFT HORIZONTAL_ALIGNMENT_RIGHT VERTICAL_ALIGNMENT_BOTTOM VERTICAL_ALIGNMENT_CENTER VERTICAL_ALIGNMENT_TOP
_onPointerPick blur clone computeExpectedHeight contains dispose focus getAscendantOfClass getClassName getDescendants getDescendantsToRef getDimension getLocalCoordinates getLocalCoordinatesToRef getParentLocalCoordinates isAscendant isDimensionFullyDefined isReady keepsFocusWith linkWithMesh markAllAsDirty markAsDirty moveToVector3 parse processKeyboard serialize setPadding setPaddingInPixels Parse
adjustWordWrappingHTMLElement: Nullable<(element: HTMLElement) => void>

This function will be called when a new HTML element is generated to be used for word wrapping. This is only used when wrapping mode HTML is selected. Using this function you can adjust word-break, overflow-wrap, hyphens, or any other CSS properties of the HTML element, language-dependent.

animations: Nullable<Animation[]> = null

Array of animations

hoverCursor: string = ""

Gets or sets the cursor to use when the control is hovered

isFocusInvisible: boolean = false

Gets or sets a boolean indicating if the control can be focusable

isHitTestVisible: boolean = true

Gets or sets a boolean indicating if the control can be hit with pointer events

isPointerBlocker: boolean = false

Gets or sets a boolean indicating if the control can block pointer events. False by default except on the following controls:

  • Button controls (Button, RadioButton, ToggleButton)
  • Checkbox
  • ColorPicker
  • InputText
  • Slider
isSerializable: boolean = true

Indicates if the control should be serialized. Defaults to true.

metadata: any = null

Gets or sets an object used to store user defined information for the node

name?: string

Defines the name of the control

onAccessibilityTagChangedObservable: any = ...

Observable that fires whenever the accessibility event of the control has changed

onAfterDrawObservable: any = ...

An event triggered after the control was drawn

onBeforeDrawObservable: any = ...

An event triggered before drawing the control

onBlurObservable: any = ...

Observable raised when the control loses the focus

onDirtyObservable: any = ...

An event triggered when the control is marked as dirty

onDisposeObservable: any = ...

An event triggered when the control has been disposed

onEnabledStateChangedObservable: any = ...

Observable that fires when the control's enabled state changes

onEnterPressedObservable: any = ...

An event triggered when a control receives an ENTER key down event

onFocusObservable: any = ...

Observable raised when the control gets the focus

onIsVisibleChangedObservable: any = ...

An event triggered when the control isVisible is changed

onKeyboardEventProcessedObservable: any = ...

Observable raised when a key event was processed

onLinesReadyObservable: any = ...

An event triggered after the text was broken up into lines

onPointerClickObservable: any = ...

An event triggered when a control is clicked on

onPointerDownObservable: any = ...

An event triggered when the pointer taps the control

onPointerEnterObservable: any = ...

An event triggered when pointer enters the control

onPointerMoveObservable: any = ...

An event triggered when the pointer moves over the control.

onPointerOutObservable: any = ...

An event triggered when the pointer moves out of the control.

onPointerUpObservable: any = ...

An event triggered when pointer up

onTextChangedObservable: any = ...

An event triggered after the text is changed

onWheelObservable: any = ...

An event triggered when pointer wheel is scrolled

overlapDeltaMultiplier?: number

Gets/sets the deoverlap movement multiplier

overlapGroup?: number

Gets/sets the overlap group of the control. Controls with overlapGroup set to a number can be deoverlapped. Controls with overlapGroup set to undefined are not deoverlapped.

https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#deoverlapping

parent: Nullable<Container>

Gets or sets the control parent

reuseHTMLForWordWrapping: boolean = false

Gets or sets a boolean indicating if the HTML element generated for word wrapping should be reused or removed after each wrapping.

tabIndex: number = -1

The tab index of this control. -1 indicates this control is not part of the tab navigation. A positive value indicates the order of the control in the tab navigation. A value of 0 indicated the control will be focused after all controls with a positive index. More than one control can have the same tab index and the navigation would then go through all controls with the same value in an order defined by the layout or the hierarchy. The value can be changed at any time.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

uniqueId: number

Gets or sets the unique id of the node. Please note that this number will be updated when the control is added to a container

useBitmapCache: boolean = false

Gets or sets a boolean indicating that the current control should cache its rendering (useful when the control does not change often)

wordSplittingFunction: Nullable<(line: string) => string[]>

Function used to split a string into words. By default, a string is split at each space character found

AddHeader: (
    control: Control,
    text: string,
    size: string | number,
    options: { controlFirst: boolean; isHorizontal: boolean },
) => any = ...
AllowAlphaInheritance: boolean = false

Gets or sets a boolean indicating if alpha must be an inherited value (false by default)

  • get accessibilityTag(): Nullable<IAccessibilityTag>

    Returns Nullable<IAccessibilityTag>

  • set accessibilityTag(value: Nullable<IAccessibilityTag>): void

    Gets or sets the accessibility tag to describe the control for accessibility purpose. By default, GUI controls already indicate accessibility info, but one can override the info using this tag.

    Parameters

    • value: Nullable<IAccessibilityTag>

    Returns void

  • get clipChildren(): boolean

    Returns boolean

  • set clipChildren(value: boolean): void

    Sets/Gets a boolean indicating if the children are clipped to the current control bounds. Please note that not clipping children may generate issues with adt.useInvalidateRectOptimization so it is recommended to turn this optimization off if you want to use unclipped children

    Parameters

    • value: boolean

    Returns void

  • get clipContent(): boolean

    Returns boolean

  • set clipContent(value: boolean): void

    Sets/Gets a boolean indicating that control content must be clipped Please note that not clipping content may generate issues with adt.useInvalidateRectOptimization so it is recommended to turn this optimization off if you want to use unclipped children

    Parameters

    • value: boolean

    Returns void

  • get descendantsOnlyPadding(): boolean

    Gets or sets a value indicating the padding should work like in CSS. Basically, it will add the padding amount on each side of the parent control for its children.

    Returns boolean

  • set descendantsOnlyPadding(value: boolean): void

    Parameters

    • value: boolean

    Returns void

  • get fixedRatio(): number

    Gets or sets a fixed ratio for this control. When different from 0, the ratio is used to compute the "second" dimension. The first dimension used in the computation is the last one set (by setting width / widthInPixels or height / heightInPixels), and the second dimension is computed as first dimension * fixedRatio

    Returns number

  • set fixedRatio(value: number): void

    Parameters

    • value: number

    Returns void

  • get fixedRatioMasterIsWidth(): boolean

    Gets or sets a boolean indicating that the fixed ratio is set on the width instead of the height. True by default. When the height of a control is set, this property is changed to false.

    Returns boolean

  • set fixedRatioMasterIsWidth(value: boolean): void

    Parameters

    • value: boolean

    Returns void

  • get fontOffset(): { ascent: number; descent: number; height: number }

    Gets or set information about font offsets (used to render and align text)

    Returns { ascent: number; descent: number; height: number }

  • set fontOffset(
        offset: { ascent: number; descent: number; height: number },
    ): void

    Parameters

    • offset: { ascent: number; descent: number; height: number }

    Returns void

  • get fontSize(): string | number

    Gets or sets the font size in px, percent of parent height, em, or rem. For font declarations, em uses the parent font and rem uses the GUI root font. Relative font sizes on the root use the default 18px font, including adaptive scaling.

    Returns string | number

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

    Parameters

    • value: string | number

    Returns void

text

_onPointerPick

  • _onPointerPick(
        target: Control,
        coordinates: Vector2,
        pointerId: number,
        buttonIndex: number,
        notifyClick: boolean,
        pi: Nullable<PointerInfoBase>,
    ): boolean

    Parameters

    • target: Control
    • coordinates: Vector2
    • pointerId: number
    • buttonIndex: number
    • notifyClick: boolean
    • pi: Nullable<PointerInfoBase>

    Returns boolean

  • Tests if a given coordinates belong to the current control

    Parameters

    • x: number

      defines x coordinate to test

    • y: number

      defines y coordinate to test

    Returns boolean

    true if the coordinates are inside the control

  • Will return all controls that have this control as ascendant

    Parameters

    • OptionaldirectDescendantsOnly: boolean

      defines if true only direct descendants of 'this' will be considered, if false direct and also indirect (children of children, an so on in a recursive manner) descendants of 'this' will be considered

    • Optionalpredicate: (control: Control) => boolean

      defines an optional predicate that will be called on every evaluated child, the predicate must return true for a given child to be part of the result, otherwise it will be ignored

    Returns Control[]

    all child controls

  • Will store all controls that have this control as ascendant in a given array

    Parameters

    • results: Control[]

      defines the array where to store the descendants

    • directDescendantsOnly: boolean = false

      defines if true only direct descendants of 'this' will be considered, if false direct and also indirect (children of children, an so on in a recursive manner) descendants of 'this' will be considered

    • Optionalpredicate: (control: Control) => boolean

      defines an optional predicate that will be called on every evaluated child, the predicate must return true for a given child to be part of the result, otherwise it will be ignored

    Returns void

  • A control has a dimension fully defined if that dimension doesn't depend on the parent's dimension. As an example, a control that has dimensions in pixels is fully defined, while in percentage is not fully defined.

    Parameters

    • dim: "width" | "height"

      the dimension to check (width or height)

    Returns boolean

    if the dimension is fully defined

  • Parses a serialized object into this control

    Parameters

    • serializedObject: any

      the object with the serialized properties

    • Optionalhost: AdvancedDynamicTexture

      the texture where the control will be instantiated. Can be empty, in which case the control will be created on the same texture

    • OptionalurlRewriter: (url: string) => string

      defines an url rewriter to update urls before sending them to the controls

    Returns Control

    this control

  • Serializes the current control

    Parameters

    • serializationObject: any

      defined the JSON serialized object

    • force: boolean = false

      if the control should be serialized even if the isSerializable flag is set to false (default false)

    • allowCanvas: boolean = true

      defines if the control is allowed to use a Canvas2D object to serialize (true by default)

    Returns void

  • Shorthand function to set the top, right, bottom, and left padding values on the control.

    Parameters

    • paddingTop: string | number

      The value of the top padding.

    • OptionalpaddingRight: string | number

      The value of the right padding. If omitted, top is used.

    • OptionalpaddingBottom: string | number

      The value of the bottom padding. If omitted, top is used.

    • OptionalpaddingLeft: string | number

      The value of the left padding. If omitted, right is used.

    Returns void

    https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#position-and-size

  • Shorthand funtion to set the top, right, bottom, and left padding values in pixels on the control.

    Parameters

    • paddingTop: number

      The value in pixels of the top padding.

    • OptionalpaddingRight: number

      The value in pixels of the right padding. If omitted, top is used.

    • OptionalpaddingBottom: number

      The value in pixels of the bottom padding. If omitted, top is used.

    • OptionalpaddingLeft: number

      The value in pixels of the left padding. If omitted, right is used.

    Returns void

    https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#position-and-size