Composite

Extends Widget

An empty widget that can contain other widgets.

Import this type with “const {Composite} = require('tabris');

Methods

append(…widgets)

Parameters:

  • …widgets: Widget[]
    Returns:this

Adds the given widgets to the composite.

append(widgets)

Parameters:

  • widgets: Widget[]
    Returns:this

Adds all widgets in the given array to the composite.

append(widgets)

Parameters:

Adds all widgets in the given collection to the composite.

Properties

padding

|Type: BoxDimensions|number, default: 0

Additional space to add inside the widget’s bounds. If set to a number, this padding will be applied on all four sides.

Events

addChild

Fired when a child is added to this widget.

Event Parameters

  • target: this The widget the event was fired on.

  • child: Widget The widget that is added as a child.

  • index: number Denotes the position in the children list at which the child widget is added.

paddingChanged

Fired when the padding property has changed.

Event Parameters

  • target: this The widget the event was fired on.

  • value: BoxDimensions|number The new value of padding.

removeChild

Fired when a child is removed from this widget.

Event Parameters

  • target: this The widget the event was fired on.

  • child: Widget The widget that is removed.

  • index: number The property index denotes the removed child widget’s position in the children list.`

Example

  1. const {Composite, TextView, ui} = require('tabris');
  2. // Create composites and append children to them
  3. let composite1 = new Composite({
  4. left: 0, top: 0, bottom: 0, right: '50%',
  5. background: '#f3f3f3'
  6. }).appendTo(ui.contentView);
  7. new TextView({
  8. left: 0, right: 0, top: '50%',
  9. alignment: 'center',
  10. text: 'Composite 1'
  11. }).appendTo(composite1);
  12. let composite2 = new Composite({
  13. left: '50%', top: 0, bottom: 0, right: 0,
  14. background: '#eaeaea'
  15. }).appendTo(ui.contentView);
  16. new TextView({
  17. left: 0, right: 0, top: '50%',
  18. alignment: 'center',
  19. text: 'Composite 2'
  20. }).appendTo(composite2);

原文:

https://youjingyu.github.io/Tabris-Documention/?folderName=widgets&pageName=Composite.html