Components are objects which are created in Gum which can contain instances of other components and of standard objects. Examples of components include:
To understand how components work, we’ll create a simple Button component. To do this:
Since both the ColoredRectangleInstance and TextInstance are using white text you may not be able to see the Text. Let’s change the ColoredRectangleInstance’s color:
Now you should be able to see the Text on top of the rectangle:
At this point we have what will eventually become a button, but it still needs some work. First, we’re going to adjust the size of the objects contained in the button. At this point you can see that the colored rectangle (the blue background for the button) is not the same size as the button. Not only do we want to make the blue colored rectangle larger, but we also want it to automatically match the Button’s size (the dotted outline).
To do this:
Now the ColoredRectangleInstance will automatically match the Button’s Width and Height:
Next we’ll position the Text. We’ll want to adjust the Text so that it is always centered, and line-wraps with the size of the button. First let’s center the Text:
At this point the Text is vertically and horizontally centered within its boundaries, but we want to have the boundaries centered within the Button. To do this:
Now let’s make it centered on the Y as well:
Finally, let’s make the width of the text match the width of the button. For the Text we’ll actually leave a border around the edge so the Text doesn’t line wrap right against the edge of the button. To do this:
Buttons are typically wider than they are tall. To match this common layout, let’s set the default values on the Button:
Notice that whenever you change these values, the contained objects (text and colored rectangle) adjust automatically.
Now that we have a component created, we can add instances of this component the same way we have added standard elements. To do this:
You can now resize and position the Button instance. You can also add multiple buttons and adjust the individually.