Overview

Easily build your UI

gadget

Goblin-gadgets contains a large collection of standard widgets, allowing to build complex UI easily and quickly. The secret is in the boxing, each box can hold other boxes, and so on. The boxes are called container and they are always rectangular.

containers

Here is an example of a dialog:

samples

Highlighting in red shows a container that contains 3 parts. Each part is itself a container.

samples

The bottom container (3) contains 2 buttons:

samples

Info

We sometimes use the term component, which is synonymous with widget.

There are many widgets, for all common uses:

Widget	Function
`Button`	Action button
`Calendar`	Complex calendar to choose a date
`ColorPicker`	Choosing a color (RGB, HSL, CMYK or grey scale)
`Gauge`	Displays a progress
`Label`	Static text
`Slider`	Entering an analog value
`Splitter`	Split content into 2 parts
`Table`	List with header, rows and columns
`TextInput`	Free text input
`Ticket`	Ticket shaped container
`Tree`	Tree list
usw.

gadgets

container is itself a widget that contains child widgets:

<Container>
  <Label />
  <Button />
</Container>

Properties

Each widget has a wide range of properties, which determine its appearance and behavior. For example, the widget Button has a property kind which defines its appearance:

samples

The text property determines the name displayed in the Button:

<Container>
  <Button kind="action" text="Clear" />
  <Button kind="task-tab" text="Home" />
</Container>

The container component has a property that determines how its children are arranged (in row or in column):

<Container kind="row">
  <Label text="What action do you want to take?" />
  <Button kind="action" text="Save" />
  <Button kind="action" text="Cancel" />
</Container>

<Container kind="column">
  <Label text="First line" />
  <Label text="Second line" />
  <Label text="Last line" />
</Container>