adw.breakpoint_bin

A widget that changes layout based on available size.

adw.breakpoint_bin.BreakpointBin provides a way to use breakpoints without adw.window.Window, adw.application_window.ApplicationWindow or adw.dialog.Dialog. It can be useful for limiting breakpoints to a single page and similar purposes. Most applications shouldn't need it.

adw.breakpoint_bin.BreakpointBin is similar to adw.bin.Bin. It has one child, set via the adw.breakpoint_bin.BreakpointBin.child property.

When adw.breakpoint_bin.BreakpointBin is resized, its child widget can rearrange its layout at specific thresholds.

The thresholds and layout changes are defined via adw.breakpoint.Breakpoint objects. They can be added using adw.breakpoint_bin.BreakpointBin.addBreakpoint.

Each breakpoint has a condition, specifying the bin's size and/or aspect ratio, and setters that automatically set object properties when that happens. The adw.breakpoint.Breakpoint.apply and adw.breakpoint.Breakpoint.unapply can be used instead for more complex scenarios.

Breakpoints are only allowed to modify widgets inside the adw.breakpoint_bin.BreakpointBin, but not on the adw.breakpoint_bin.BreakpointBin itself or any other widgets.

If multiple breakpoints can be used for the current size, the last one is always picked. The current breakpoint can be tracked using the adw.breakpoint_bin.BreakpointBin.currentBreakpoint property.

If none of the breakpoints can be used, that property will be set to NULL, and the original property values will be used instead.

Minimum Size

Adding a breakpoint to adw.breakpoint_bin.BreakpointBin will result in it having no minimum size. The gtk.widget.Widget.widthRequest and gtk.widget.Widget.heightRequest properties must always be set when using breakpoints, indicating the smallest size you want to support.

The minimum size and breakpoint conditions must be carefully selected so that the child widget completely fits. If it doesn't, it will overflow and a warning message will be printed.

When choosing minimum size, consider translations and text scale factor changes. Make sure to leave enough space for text labels, and enable ellipsizing or wrapping if they might not fit.

For gtk.label.Label this can be done via gtk.label.Label.ellipsize, or via gtk.label.Label.wrap together with gtk.label.Label.wrapMode.

For buttons, use gtk.button.Button.canShrink, gtk.menu_button.MenuButton.canShrink, adw.split_button.SplitButton.canShrink, or adw.button_content.ButtonContent.canShrink.

Example

GtkWidget *bin, *child;
AdwBreakpoint *breakpoint;

bin = adw_breakpoint_bin_new ();
gtk_widget_set_size_request (bin, 150, 150);

child = gtk_label_new ("Wide");
gtk_label_set_ellipsize (GTK_LABEL (label), PANGO_ELLIPSIZE_END);
gtk_widget_add_css_class (child, "title-1");
adw_breakpoint_bin_set_child (ADW_BREAKPOINT_BIN (bin), child);

breakpoint = adw_breakpoint_new (adw_breakpoint_condition_parse ("max-width: 200px"));
adw_breakpoint_add_setters (breakpoint,
                            G_OBJECT (child), "label", "Narrow",
                            NULL);
adw_breakpoint_bin_add_breakpoint (ADW_BREAKPOINT_BIN (bin), breakpoint);

The bin has a single label inside it, displaying "Wide". When the bin's width is smaller than or equal to 200px, it changes to "Narrow".

adw.breakpoint_bin.BreakpointBin as gtk.buildable.Buildable

adw.breakpoint_bin.BreakpointBin allows adding adw.breakpoint.Breakpoint objects as children.

Example of an adw.breakpoint_bin.BreakpointBin UI definition:

<object class="AdwBreakpointBin">
  <property name="width-request">150</property>
  <property name="height-request">150</property>
  <property name="child">
    <object class="GtkLabel" id="child">
      <property name="label">Wide</property>
      <property name="ellipsize">end</property>
      <style>
        <class name="title-1"/>
      </style>
    </object>
  </property>
  <child>
    <object class="AdwBreakpoint">
      <condition>max-width: 200px</condition>
      <setter object="child" property="label">Narrow</setter>
    </object>
  </child>
</object>

See adw.breakpoint.Breakpoint documentation for details.

Fluent builder implementation template for adw.breakpoint_bin.BreakpointBin

Fluent builder for adw.breakpoint_bin.BreakpointBin