Skip to main content

Interface: WidgetProps

Defined in: react/src/generated/jsx.ts:404

The base class for all widgets.

It manages the widget lifecycle, layout, states and style.

Height-for-width Geometry Management

GTK uses a height-for-width (and width-for-height) geometry management system. Height-for-width means that a widget can change how much vertical space it needs, depending on the amount of horizontal space that it is given (and similar for width-for-height). The most common example is a label that reflows to fill up the available width, wraps to fewer lines, and therefore needs less height.

Height-for-width geometry management is implemented in GTK by way of two virtual methods:

There are some important things to keep in mind when implementing height-for-width and when using it in widget implementations.

If you implement a direct GtkWidget subclass that supports height-for-width or width-for-height geometry management for itself or its child widgets, the [vfunc@Gtk.Widget.get_request_mode] virtual function must be implemented as well and return the widget's preferred request mode. The default implementation of this virtual function returns %GTK_SIZE_REQUEST_CONSTANT_SIZE, which means that the widget will only ever get -1 passed as the for_size value to its [vfunc@Gtk.Widget.measure] implementation.

The geometry management system will query a widget hierarchy in only one orientation at a time. When widgets are initially queried for their minimum sizes it is generally done in two initial passes in the [enum@Gtk.SizeRequestMode] chosen by the toplevel.

For example, when queried in the normal %GTK_SIZE_REQUEST_HEIGHT_FOR_WIDTH mode:

First, the default minimum and natural width for each widget in the interface will be computed using [method@Gtk.Widget.measure] with an orientation of %GTK_ORIENTATION_HORIZONTAL and a for_size of -1. Because the preferred widths for each widget depend on the preferred widths of their children, this information propagates up the hierarchy, and finally a minimum and natural width is determined for the entire toplevel. Next, the toplevel will use the minimum width to query for the minimum height contextual to that width using [method@Gtk.Widget.measure] with an orientation of %GTK_ORIENTATION_VERTICAL and a for_size of the just computed width. This will also be a highly recursive operation. The minimum height for the minimum width is normally used to set the minimum size constraint on the toplevel.

After the toplevel window has initially requested its size in both dimensions it can go on to allocate itself a reasonable size (or a size previously specified with [method@Gtk.Window.set_default_size]). During the recursive allocation process it’s important to note that request cycles will be recursively executed while widgets allocate their children. Each widget, once allocated a size, will go on to first share the space in one orientation among its children and then request each child's height for its target allocated width or its width for allocated height, depending. In this way a widget will typically be requested its size a number of times before actually being allocated a size. The size a widget is finally allocated can of course differ from the size it has requested. For this reason, GtkWidget caches a small number of results to avoid re-querying for the same sizes in one allocation cycle.

If a widget does move content around to intelligently use up the allocated size then it must support the request in both GtkSizeRequestModes even if the widget in question only trades sizes in a single orientation.

For instance, a [class@Gtk.Label] that does height-for-width word wrapping will not expect to have [vfunc@Gtk.Widget.measure] with an orientation of %GTK_ORIENTATION_VERTICAL called because that call is specific to a width-for-height request. In this case the label must return the height required for its own minimum possible width. By following this rule any widget that handles height-for-width or width-for-height requests will always be allocated at least enough space to fit its own content.

Here are some examples of how a %GTK_SIZE_REQUEST_HEIGHT_FOR_WIDTH widget generally deals with width-for-height requests:

static void
foo_widget_measure (GtkWidget *widget,
GtkOrientation orientation,
int for_size,
int *minimum_size,
int *natural_size,
int *minimum_baseline,
int *natural_baseline)
{
if (orientation == GTK_ORIENTATION_HORIZONTAL)
{
// Calculate minimum and natural width
}
else // VERTICAL
{
if (i_am_in_height_for_width_mode)
{
int min_width, dummy;

// First, get the minimum width of our widget
GTK_WIDGET_GET_CLASS (widget)->measure (widget, GTK_ORIENTATION_HORIZONTAL, -1,
&min_width, &dummy, &dummy, &dummy);

// Now use the minimum width to retrieve the minimum and natural height to display
// that width.
GTK_WIDGET_GET_CLASS (widget)->measure (widget, GTK_ORIENTATION_VERTICAL, min_width,
minimum_size, natural_size, &dummy, &dummy);
}
else
{
// ... some widgets do both.
}
}
}

Often a widget needs to get its own request during size request or allocation. For example, when computing height it may need to also compute width. Or when deciding how to use an allocation, the widget may need to know its natural size. In these cases, the widget should be careful to call its virtual methods directly, like in the code example above.

It will not work to use the wrapper function [method@Gtk.Widget.measure] inside your own [vfunc@Gtk.Widget.size_allocate] implementation. These return a request adjusted by [class@Gtk.SizeGroup], the widget's align and expand flags, as well as its CSS style.

If a widget used the wrappers inside its virtual method implementations, then the adjustments (such as widget margins) would be applied twice. GTK therefore does not allow this and will warn if you try to do it.

Of course if you are getting the size request for another widget, such as a child widget, you must use [method@Gtk.Widget.measure]; otherwise, you would not properly consider widget margins, [class@Gtk.SizeGroup], and so forth.

GTK also supports baseline vertical alignment of widgets. This means that widgets are positioned such that the typographical baseline of widgets in the same row are aligned. This happens if a widget supports baselines, has a vertical alignment using baselines, and is inside a widget that supports baselines and has a natural “row” that it aligns to the baseline, or a baseline assigned to it by the grandparent.

Baseline alignment support for a widget is also done by the [vfunc@Gtk.Widget.measure] virtual function. It allows you to report both a minimum and natural size.

If a widget ends up baseline aligned it will be allocated all the space in the parent as if it was %GTK_ALIGN_FILL, but the selected baseline can be found via [method@Gtk.Widget.get_baseline]. If the baseline has a value other than -1 you need to align the widget such that the baseline appears at the position.

GtkWidget as GtkBuildable

The GtkWidget implementation of the GtkBuildable interface supports various custom elements to specify additional aspects of widgets that are not directly expressed as properties.

If the widget uses a [class@Gtk.LayoutManager], GtkWidget supports a custom <layout> element, used to define layout properties:

<object class="GtkGrid" id="my_grid">
<child>
<object class="GtkLabel" id="label1">
<property name="label">Description</property>
<layout>
<property name="column">0</property>
<property name="row">0</property>
<property name="row-span">1</property>
<property name="column-span">1</property>
</layout>
</object>
</child>
<child>
<object class="GtkEntry" id="description_entry">
<layout>
<property name="column">1</property>
<property name="row">0</property>
<property name="row-span">1</property>
<property name="column-span">1</property>
</layout>
</object>
</child>
</object>

GtkWidget allows style information such as style classes to be associated with widgets, using the custom <style> element:

<object class="GtkButton" id="button1">
<style>
<class name="my-special-button-class"/>
<class name="dark-button"/>
</style>
</object>

GtkWidget allows defining accessibility information, such as properties, relations, and states, using the custom <accessibility> element:

<object class="GtkButton" id="button1">
<accessibility>
<property name="label">Download</property>
<relation name="labelled-by">label1</relation>
</accessibility>
</object>

Building composite widgets from template XML

GtkWidget exposes some facilities to automate the procedure of creating composite widgets using "templates".

To create composite widgets with GtkBuilder XML, one must associate the interface description with the widget class at class initialization time using [method@Gtk.WidgetClass.set_template].

The interface description semantics expected in composite template descriptions is slightly different from regular [class@Gtk.Builder] XML.

Unlike regular interface descriptions, [method@Gtk.WidgetClass.set_template] will expect a <template> tag as a direct child of the toplevel <interface> tag. The <template> tag must specify the “class” attribute which must be the type name of the widget. Optionally, the “parent” attribute may be specified to specify the direct parent type of the widget type; this is ignored by GtkBuilder but can be used by UI design tools to introspect what kind of properties and internal children exist for a given type when the actual type does not exist.

The XML which is contained inside the <template> tag behaves as if it were added to the <object> tag defining the widget itself. You may set properties on a widget by inserting <property> tags into the <template> tag, and also add <child> tags to add children and extend a widget in the normal way you would with <object> tags.

Additionally, <object> tags can also be added before and after the initial <template> tag in the normal way, allowing one to define auxiliary objects which might be referenced by other widgets declared as children of the <template> tag.

Since, unlike the <object> tag, the <template> tag does not contain an “id” attribute, if you need to refer to the instance of the object itself that the template will create, simply refer to the template class name in an applicable element content.

Here is an example of a template definition, which includes an example of this in the <signal> tag:

<interface>
<template class="FooWidget" parent="GtkBox">
<property name="orientation">horizontal</property>
<property name="spacing">4</property>
<child>
<object class="GtkButton" id="hello_button">
<property name="label">Hello World</property>
<signal name="clicked" handler="hello_button_clicked" object="FooWidget" swapped="yes"/>
</object>
</child>
<child>
<object class="GtkButton" id="goodbye_button">
<property name="label">Goodbye World</property>
</object>
</child>
</template>
</interface>

Typically, you'll place the template fragment into a file that is bundled with your project, using GResource. In order to load the template, you need to call [method@Gtk.WidgetClass.set_template_from_resource] from the class initialization of your GtkWidget type:

static void
foo_widget_class_init (FooWidgetClass *klass)
{
// ...

gtk_widget_class_set_template_from_resource (GTK_WIDGET_CLASS (klass),
"/com/example/ui/foowidget.ui");
}

You will also need to call [method@Gtk.Widget.init_template] from the instance initialization function:

static void
foo_widget_init (FooWidget *self)
{
gtk_widget_init_template (GTK_WIDGET (self));

// Initialize the rest of the widget...
}

as well as calling [method@Gtk.Widget.dispose_template] from the dispose function:

static void
foo_widget_dispose (GObject *gobject)
{
FooWidget *self = FOO_WIDGET (gobject);

// Dispose objects for which you have a reference...

// Clear the template children for this widget type
gtk_widget_dispose_template (GTK_WIDGET (self), FOO_TYPE_WIDGET);

G_OBJECT_CLASS (foo_widget_parent_class)->dispose (gobject);
}

You can access widgets defined in the template using the [method@Gtk.Widget.get_template_child] function, but you will typically declare a pointer in the instance private data structure of your type using the same name as the widget in the template definition, and call [method@Gtk.WidgetClass.bind_template_child_full] (or one of its wrapper macros [func@Gtk.widget_class_bind_template_child] and [func@Gtk.widget_class_bind_template_child_private]) with that name, e.g.

typedef struct {
GtkWidget *hello_button;
GtkWidget *goodbye_button;
} FooWidgetPrivate;

G_DEFINE_TYPE_WITH_PRIVATE (FooWidget, foo_widget, GTK_TYPE_BOX)

static void
foo_widget_dispose (GObject *gobject)
{
gtk_widget_dispose_template (GTK_WIDGET (gobject), FOO_TYPE_WIDGET);

G_OBJECT_CLASS (foo_widget_parent_class)->dispose (gobject);
}

static void
foo_widget_class_init (FooWidgetClass *klass)
{
// ...
G_OBJECT_CLASS (klass)->dispose = foo_widget_dispose;

gtk_widget_class_set_template_from_resource (GTK_WIDGET_CLASS (klass),
"/com/example/ui/foowidget.ui");
gtk_widget_class_bind_template_child_private (GTK_WIDGET_CLASS (klass),
FooWidget, hello_button);
gtk_widget_class_bind_template_child_private (GTK_WIDGET_CLASS (klass),
FooWidget, goodbye_button);
}

static void
foo_widget_init (FooWidget *widget)
{
gtk_widget_init_template (GTK_WIDGET (widget));
}

You can also use [method@Gtk.WidgetClass.bind_template_callback_full] (or is wrapper macro [func@Gtk.widget_class_bind_template_callback]) to connect a signal callback defined in the template with a function visible in the scope of the class, e.g.

// the signal handler has the instance and user data swapped
// because of the swapped="yes" attribute in the template XML
static void
hello_button_clicked (FooWidget *self,
GtkButton *button)
{
g_print ("Hello, world!\n");
}

static void
foo_widget_class_init (FooWidgetClass *klass)
{
// ...
gtk_widget_class_set_template_from_resource (GTK_WIDGET_CLASS (klass),
"/com/example/ui/foowidget.ui");
gtk_widget_class_bind_template_callback (GTK_WIDGET_CLASS (klass), hello_button_clicked);
}

Extended by

Properties

canFocus?

optional canFocus: boolean

Defined in: react/src/generated/jsx.ts:412

Whether the widget or any of its descendents can accept the input focus.

This property is meant to be set by widget implementations, typically in their instance init function.


canTarget?

optional canTarget: boolean

Defined in: react/src/generated/jsx.ts:414

Whether the widget can receive pointer events.


children?

optional children: ReactNode

Defined in: react/src/generated/jsx.ts:688


cssClasses?

optional cssClasses: string[]

Defined in: react/src/generated/jsx.ts:416

A list of css classes applied to this widget.


cssName?

optional cssName: string

Defined in: react/src/generated/jsx.ts:423

The name of this widget in the CSS tree.

This property is meant to be set by widget implementations, typically in their instance init function.


cursor?

optional cursor: number

Defined in: react/src/generated/jsx.ts:425

The cursor used by @widget.


focusable?

optional focusable: boolean

Defined in: react/src/generated/jsx.ts:433

Whether this widget itself will accept the input focus.


focusOnClick?

optional focusOnClick: boolean

Defined in: react/src/generated/jsx.ts:431

Whether the widget should grab focus when it is clicked with the mouse.

This property is only relevant for widgets that can take focus.


halign?

optional halign: Align

Defined in: react/src/generated/jsx.ts:435

How to distribute horizontal space if widget gets extra space.


hasDefault?

optional hasDefault: boolean

Defined in: react/src/generated/jsx.ts:437

Whether the widget is the default widget.


hasFocus?

optional hasFocus: boolean

Defined in: react/src/generated/jsx.ts:439

Whether the widget has the input focus.


hasTooltip?

optional hasTooltip: boolean

Defined in: react/src/generated/jsx.ts:448

Enables or disables the emission of the [signal@Gtk.Widget::query-tooltip] signal on @widget.

A true value indicates that widget can have a tooltip, in this case the widget will be queried using [signal@Gtk.Widget::query-tooltip] to determine whether it will provide a tooltip or not.


heightRequest?

optional heightRequest: number

Defined in: react/src/generated/jsx.ts:454

Overrides for height request of the widget.

If this is -1, the natural request will be used.


hexpand?

optional hexpand: boolean

Defined in: react/src/generated/jsx.ts:456

Whether to expand horizontally.


hexpandSet?

optional hexpandSet: boolean

Defined in: react/src/generated/jsx.ts:458

Whether to use the hexpand property.


layoutManager?

optional layoutManager: LayoutManager

Defined in: react/src/generated/jsx.ts:466

The [class@Gtk.LayoutManager] instance to use to compute the preferred size of the widget, and allocate its children.

This property is meant to be set by widget implementations, typically in their instance init function.


limitEvents?

optional limitEvents: boolean

Defined in: react/src/generated/jsx.ts:475

Makes this widget act like a modal dialog, with respect to event delivery.

Global event controllers will not handle events with targets inside the widget, unless they are set up to ignore propagation limits. See [method@Gtk.EventController.set_propagation_limit].


marginBottom?

optional marginBottom: number

Defined in: react/src/generated/jsx.ts:483

Margin on bottom side of widget.

This property adds margin outside of the widget's normal size request, the margin will be added in addition to the size from [method@Gtk.Widget.set_size_request] for example.


marginEnd?

optional marginEnd: number

Defined in: react/src/generated/jsx.ts:494

Margin on end of widget, horizontally.

This property supports left-to-right and right-to-left text directions.

This property adds margin outside of the widget's normal size request, the margin will be added in addition to the size from [method@Gtk.Widget.set_size_request] for example.


marginStart?

optional marginStart: number

Defined in: react/src/generated/jsx.ts:505

Margin on start of widget, horizontally.

This property supports left-to-right and right-to-left text directions.

This property adds margin outside of the widget's normal size request, the margin will be added in addition to the size from [method@Gtk.Widget.set_size_request] for example.


marginTop?

optional marginTop: number

Defined in: react/src/generated/jsx.ts:513

Margin on top side of widget.

This property adds margin outside of the widget's normal size request, the margin will be added in addition to the size from [method@Gtk.Widget.set_size_request] for example.


name?

optional name: string

Defined in: react/src/generated/jsx.ts:515

The name of the widget.


onDestroy()?

optional onDestroy: (self) => void

Defined in: react/src/generated/jsx.ts:593

Signals that all holders of a reference to the widget should release the reference that they hold.

May result in finalization of the widget if all references are released.

This signal is not suitable for saving widget state.

Parameters

ParameterType
selfWidget

Returns

void


onDirectionChanged()?

optional onDirectionChanged: (self, previousDirection) => void

Defined in: react/src/generated/jsx.ts:595

Emitted when the text direction of a widget changes.

Parameters

ParameterType
selfWidget
previousDirectionTextDirection

Returns

void


onHide()?

optional onHide: (self) => void

Defined in: react/src/generated/jsx.ts:600

Emitted when widget is hidden.

Parameters

ParameterType
selfWidget

Returns

void


onKeynavFailed()?

optional onKeynavFailed: (self, direction) => boolean

Defined in: react/src/generated/jsx.ts:606

Emitted if keyboard navigation fails.

See [method@Gtk.Widget.keynav_failed] for details.

Parameters

ParameterType
selfWidget
directionDirectionType

Returns

boolean


onMap()?

optional onMap: (self) => void

Defined in: react/src/generated/jsx.ts:618

Emitted when widget is going to be mapped.

A widget is mapped when the widget is visible (which is controlled with [property@Gtk.Widget:visible]) and all its parents up to the toplevel widget are also visible.

The ::map signal can be used to determine whether a widget will be drawn, for instance it can resume an animation that was stopped during the emission of [signal@Gtk.Widget::unmap].

Parameters

ParameterType
selfWidget

Returns

void


onMnemonicActivate()?

optional onMnemonicActivate: (self, groupCycling) => boolean

Defined in: react/src/generated/jsx.ts:624

Emitted when a widget is activated via a mnemonic.

The default handler for this signal activates widget if group_cycling is false, or just makes widget grab focus if group_cycling is true.

Parameters

ParameterType
selfWidget
groupCyclingboolean

Returns

boolean


onMoveFocus()?

optional onMoveFocus: (self, direction) => void

Defined in: react/src/generated/jsx.ts:633

Emitted when the focus is moved.

The ::move-focus signal is a keybinding signal.

The default bindings for this signal are Tab to move forward, and Shift+Tab to move backward.

Parameters

ParameterType
selfWidget
directionDirectionType

Returns

void


onQueryTooltip()?

optional onQueryTooltip: (self, x, y, keyboardMode, tooltip) => boolean

Defined in: react/src/generated/jsx.ts:648

Emitted when the widget’s tooltip is about to be shown.

This happens when the [property@Gtk.Widget:has-tooltip] property is true and the hover timeout has expired with the cursor hovering above @widget; or emitted when widget got focus in keyboard mode.

Using the given coordinates, the signal handler should determine whether a tooltip should be shown for @widget. If this is the case true should be returned, false otherwise. Note that if keyboard_mode is true, the values of x and y are undefined and should not be used.

The signal handler is free to manipulate tooltip with the therefore destined function calls.

Parameters

ParameterType
selfWidget
xnumber
ynumber
keyboardModeboolean
tooltipTooltip

Returns

boolean


onRealize()?

optional onRealize: (self) => void

Defined in: react/src/generated/jsx.ts:661

Emitted when widget is associated with a GdkSurface.

This means that [method@Gtk.Widget.realize] has been called or the widget has been mapped (that is, it is going to be drawn).

Parameters

ParameterType
selfWidget

Returns

void


onShow()?

optional onShow: (self) => void

Defined in: react/src/generated/jsx.ts:663

Emitted when widget is shown.

Parameters

ParameterType
selfWidget

Returns

void


onStateFlagsChanged()?

optional onStateFlagsChanged: (self, flags) => void

Defined in: react/src/generated/jsx.ts:669

Emitted when the widget state changes.

See [method@Gtk.Widget.get_state_flags].

Parameters

ParameterType
selfWidget
flagsStateFlags

Returns

void


onUnmap()?

optional onUnmap: (self) => void

Defined in: react/src/generated/jsx.ts:679

Emitted when widget is going to be unmapped.

A widget is unmapped when either it or any of its parents up to the toplevel widget have been set as hidden.

As ::unmap indicates that a widget will not be shown any longer, it can be used to, for example, stop an animation on the widget.

Parameters

ParameterType
selfWidget

Returns

void


onUnrealize()?

optional onUnrealize: (self) => void

Defined in: react/src/generated/jsx.ts:686

Emitted when the GdkSurface associated with widget is destroyed.

This means that [method@Gtk.Widget.unrealize] has been called or the widget has been unmapped (that is, it is going to be hidden).

Parameters

ParameterType
selfWidget

Returns

void


opacity?

optional opacity: number

Defined in: react/src/generated/jsx.ts:517

The requested opacity of the widget.


overflow?

optional overflow: Overflow

Defined in: react/src/generated/jsx.ts:524

How content outside the widget's content area is treated.

This property is meant to be set by widget implementations, typically in their instance init function.


parent?

optional parent: Widget

Defined in: react/src/generated/jsx.ts:526

The parent widget of this widget.


receivesDefault?

optional receivesDefault: boolean

Defined in: react/src/generated/jsx.ts:528

Whether the widget will receive the default action when it is focused.


root?

optional root: Root

Defined in: react/src/generated/jsx.ts:534

The GtkRoot widget of the widget tree containing this widget.

This will be NULL if the widget is not contained in a root widget.


scaleFactor?

optional scaleFactor: number

Defined in: react/src/generated/jsx.ts:536

The scale factor of the widget.


sensitive?

optional sensitive: boolean

Defined in: react/src/generated/jsx.ts:538

Whether the widget responds to input.


tooltipMarkup?

optional tooltipMarkup: string

Defined in: react/src/generated/jsx.ts:554

Sets the text of tooltip to be the given string, which is marked up with Pango markup.

Also see [method@Gtk.Tooltip.set_markup].

This is a convenience property which will take care of getting the tooltip shown if the given string is not NULL: [property@Gtk.Widget:has-tooltip] will automatically be set to true and there will be taken care of [signal@Gtk.Widget::query-tooltip] in the default signal handler.

Note that if both [property@Gtk.Widget:tooltip-text] and [property@Gtk.Widget:tooltip-markup] are set, the last one wins.


tooltipText?

optional tooltipText: string

Defined in: react/src/generated/jsx.ts:569

Sets the text of tooltip to be the given string.

Also see [method@Gtk.Tooltip.set_text].

This is a convenience property which will take care of getting the tooltip shown if the given string is not NULL: [property@Gtk.Widget:has-tooltip] will automatically be set to true and there will be taken care of [signal@Gtk.Widget::query-tooltip] in the default signal handler.

Note that if both [property@Gtk.Widget:tooltip-text] and [property@Gtk.Widget:tooltip-markup] are set, the last one wins.


valign?

optional valign: Align

Defined in: react/src/generated/jsx.ts:571

How to distribute vertical space if widget gets extra space.


vexpand?

optional vexpand: boolean

Defined in: react/src/generated/jsx.ts:573

Whether to expand vertically.


vexpandSet?

optional vexpandSet: boolean

Defined in: react/src/generated/jsx.ts:575

Whether to use the vexpand property.


visible?

optional visible: boolean

Defined in: react/src/generated/jsx.ts:577

Whether the widget is visible.


widthRequest?

optional widthRequest: number

Defined in: react/src/generated/jsx.ts:583

Overrides for width request of the widget.

If this is -1, the natural request will be used.