@gtkx/react / AdwWindow

Variable: AdwWindow

const AdwWindow: (props) => ReactNode

Defined in: packages/react/src/generated/compounds.ts:1459

A freeform window.

The AdwWindow widget is a subclass of Gtk.Window which has no titlebar area. Instead, ToolbarView can be used together with HeaderBar or Gtk.HeaderBar as follows:

<object class="AdwWindow">
  <property name="content">
    <object class="AdwToolbarView">
      <child type="top">
        <object class="AdwHeaderBar"/>
      </child>
      <property name="content">
        <!-- ... -->
      </property>
    </object>
  </property>
</object>

Using Gtk.Window.titlebar or Gtk.Window.child is not supported and will result in a crash. Use Window.content instead.

Dialogs

AdwWindow can contain Dialog. Use Dialog.present with the window or a widget within a window to show a dialog.

Breakpoints

AdwWindow can be used with Breakpoint the same way as BreakpointBin. Refer to that widget's documentation for details.

Example:

<object class="AdwWindow">
  <property name="content">
    <object class="AdwToolbarView">
      <child type="top">
        <object class="AdwHeaderBar"/>
      </child>
      <property name="content">
        <!-- ... -->
      </property>
      <child type="bottom">
        <object class="GtkActionBar" id="bottom_bar">
          <property name="revealed">True</property>
          <property name="visible">False</property>
        </object>
      </child>
    </object>
  </property>
  <child>
    <object class="AdwBreakpoint">
      <condition>max-width: 500px</condition>
      <setter object="bottom_bar" property="visible">True</setter>
    </object>
  </child>
</object>

When breakpoints are used, the minimum size must be larger than the smallest UI state. AdwWindow defaults to the minimum size of 360×200 px. If that's too small, set the Gtk.Widget.width-request and Gtk.Widget.height-request properties manually.

Adaptive Preview

AdwWindow has a debug tool called adaptive preview. It can be opened from GTK Inspector or by pressing Ctrl+Shift+M, and controlled via the Window.adaptive-preview property.

Parameters

Parameter	Type
props	AdwWindowProps

Returns

ReactNode