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:
- widgets: WidgetCollection
Returns: this
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
indexdenotes the removed child widget’s position in the children list.`
Example
const {Composite, TextView, ui} = require('tabris');
// Create composites and append children to them
let composite1 = new Composite({
left: 0, top: 0, bottom: 0, right: '50%',
background: '#f3f3f3'
}).appendTo(ui.contentView);
new TextView({
left: 0, right: 0, top: '50%',
alignment: 'center',
text: 'Composite 1'
}).appendTo(composite1);
let composite2 = new Composite({
left: '50%', top: 0, bottom: 0, right: 0,
background: '#eaeaea'
}).appendTo(ui.contentView);
new TextView({
left: 0, right: 0, top: '50%',
alignment: 'center',
text: 'Composite 2'
}).appendTo(composite2);
