Class “LayoutData”

Object > LayoutData

Provides layout information for a widget to be used by the parent widget when determining its size and position. See also LayoutDataValue

Type: LayoutData extends Object
Constructor: public
Singleton: No
Namespace: tabris
Direct subclasses: None
JSX Support: No

Examples

JavaScript

import {LayoutData} from 'tabris';

const layoutData = LayoutData.from({left: 16, right: '20%', height: 128});
console.log(layoutData.height); // "128"

Constructor

new LayoutData(parameters)

Parameter Type Description
parameters LayoutDataProperties An object containing some or all LayoutData properties. Constraints have to be instances of the Constraint class. Any omitted property defaults to ‘auto’.

Methods

equals(value)

Tests if the given value is a LayoutData instance that is deeply equal to this one.

Parameter Type Description
value LayoutData  

Returns: boolean

toString()

Returns a string representation of LayoutData.

Returns: string

Static Methods

from(layoutDataValue)

Creates a new instance of LayoutData using any valid layoutData expression. For any other value, including null, the method throws.

Parameter Type Description
layoutDataValue LayoutDataValue The value to create

Returns: LayoutData

Properties

baseline

The vertical position of the widget’s baseline relative to a sibling widget.

Type: SiblingReference | 'auto'
Default: 'auto'
Settable: No

This property can only be set via constructor. Once set, it cannot change anymore.

bottom

The position of the widget’s bottom edge relative to the parent or a sibling widget. Must not be negative.

Type: Constraint | 'auto'
Default: 'auto'
Settable: No

This property can only be set via constructor. Once set, it cannot change anymore.

centerX

The horizontal position of the widget’s center relative to the parent’s center.

Type: Offset | 'auto'
Default: 'auto'
Settable: No

This property can only be set via constructor. Once set, it cannot change anymore.

centerY

The vertical position of the widget’s center relative to the parent’s center.

Type: Offset | 'auto'
Default: 'auto'
Settable: No

This property can only be set via constructor. Once set, it cannot change anymore.

height

The height of the widget.

Type: Dimension | 'auto'
Default: 'auto'
Settable: No

This property can only be set via constructor. Once set, it cannot change anymore.

left

The position of the widget’s left edge relative to the parent or a sibling widget. Must not be negative.

Type: Constraint | 'auto'
Default: 'auto'
Settable: No

This property can only be set via constructor. Once set, it cannot change anymore.

The position of the widget’s right edge relative to the parent or a sibling widget. Must not be negative.

Type: Constraint | 'auto'
Default: 'auto'
Settable: No

This property can only be set via constructor. Once set, it cannot change anymore.

top

The position of the widget’s top edge relative to the parent or a sibling widget. Must not be negative.

Type: Constraint | 'auto'
Default: 'auto'
Settable: No

This property can only be set via constructor. Once set, it cannot change anymore.

width

The width of the widget.

Type: Dimension | 'auto'
Default: 'auto'
Settable: No

This property can only be set via constructor. Once set, it cannot change anymore.

Static Properties

center

An instance of LayoutData that centers a widget horizontally and vertically. Equivalent to LayoutData.from({centerX: 0, centerY: 0})

Type: LayoutData
Settable: No

next

A SiblingReference indicating the next widget in the list of children attached to the same parent. Used by the baseline property. An alias of Constraint.next.

Type: typeof Constraint.next
Settable: No

prev

A SiblingReference indicating the previous widget in the list of children attached to the same parent. Used by the baseline property. An alias of Constraint.next.

Type: typeof Constraint.prev
Settable: No

stretch

An instance of LayoutData that makes a widget fill the inner width and height of its parent (padding excluded). Equivalent to LayoutData.from({left: 0, top: 0, right: 0, bottom: 0}).

Type: LayoutData
Settable: No

stretchX

An instance of LayoutData that makes a widget as wide as its parent (padding excluded). Equivalent to LayoutData.from({left: 0, right: 0}).

Type: LayoutData
Settable: No

stretchY

An instance of LayoutData that makes a widget as high as its parent (padding excluded). Equivalent to LayoutData.from({top: 0, bottom: 0}).

Type: LayoutData
Settable: No

LayoutDataValue

  • JavaScript Type: tabris.LayoutData, Object
  • TypeScript Type: tabris.LayoutDataValue

A LayoutDataValue provides layout information for a widget to be used its parent when determining its size and position. It allows various expressions that can all be used in place of a LayoutData instance for convenience. All API that accepts these expressions will convert them to a LayoutData object.

In addition to LayoutData instances LayoutDataValue includes:

LayoutDataLikeObject

  • JavaScript Type: Object
  • TypeScript Type: tabris.LayoutDataLikeObject
interface LayoutDataLikeObject {
  left?: 'auto' | ConstraintValue;
  right?: 'auto' | ConstraintValue;
  top?: 'auto' | ConstraintValue;
  bottom?: 'auto' | ConstraintValue;
  centerX?: 'auto' | Offset | true;
  centerY?: 'auto' | Offset | true;
  baseline?: 'auto' | SiblingReferenceValue | true;
  width?: 'auto' | Dimension;
  height?: 'auto' | Dimension;
}

A plain object implementing the same properties as LayoutData.

An instance of LayoutData is a valid LayoutDataLikeObject, but in LayoutDataLikeObject all properties are optional and less strict. For example left, top, right and bottom accept ConstraintValue (e.g. a number) in place of a Constraint instance.

A value of true is also accepted for all fields except width and height. For left, right, top, bottom, centerX and centerY it means 0. For baseline it means 'prev()'.

Example:

widget.layoutData = {
  baseline: 'prev()',
  left: 10,
  width: 100
};
widget.layoutData = {
  top: '25%',
  centerX: true
};

LayoutDataString

There are 4 alias strings that can be used in place of a LayoutData object:

Alias Equivalent
'center' {centerX: 0, centerY: 0}
'stretch' {left: 0, top: 0, right: 0, bottom: 0}
'stretchX' {left: 0, right: 0}
'stretchY' {top: 0, bottom: 0}
widget.layoutData = 'stretch';