AdwToolbarView

A widget containing a page, as well as top and/or bottom bars.

<picture> <source srcset="toolbar-view-dark.png" media="(prefers-color-scheme: dark)"> <img src="toolbar-view.png" alt="toolbar-view"> </picture>

adw.toolbar_view.ToolbarView has a single content widget and one or multiple top and bottom bars, shown at the top and bottom sides respectively.

Example of an adw.toolbar_view.ToolbarView UI definition:

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

The following kinds of top and bottom bars are supported:

• class@HeaderBar
• class@TabBar
• class@ViewSwitcherBar
• gtk.action_bar.ActionBar
• gtk.header_bar.HeaderBar
• gtk.popover_menu_bar.PopoverMenuBar
• gtk.search_bar.SearchBar
• Any gtk.box.Box or a similar widget with the `.toolbar` style class

By default, top and bottom bars are flat and scrolling content has a subtle undershoot shadow, same as when using the `.undershoot-top` and `.undershoot-bottom` style classes. This works well in most cases, e.g. with class@StatusPage or class@PreferencesPage, where the background at the top and bottom parts of the page is uniform. Additionally, windows with sidebars should always use this style.

property@ToolbarView:top-bar-style and property@ToolbarView:bottom-bar-style properties can be used add an opaque background and a persistent shadow to top and bottom bars, this can be useful for content such as utility panes, where some elements are adjacent to the top/bottom bars, or class@TabView, where each page can have a different background.

<picture style="min-width: 33%; display: inline-block;"> <source srcset="toolbar-view-flat-1-dark.png" media="(prefers-color-scheme: dark)"> <img src="toolbar-view-flat-1.png" alt="toolbar-view-flat-1"> </picture> <picture style="min-width: 33%; display: inline-block;"> <source srcset="toolbar-view-flat-2-dark.png" media="(prefers-color-scheme: dark)"> <img src="toolbar-view-flat-2.png" alt="toolbar-view-flat-2"> </picture> <picture style="min-width: 33%; display: inline-block;"> <source srcset="toolbar-view-raised-dark.png" media="(prefers-color-scheme: dark)"> <img src="toolbar-view-raised.png" alt="toolbar-view-raised"> </picture>

adw.toolbar_view.ToolbarView ensures the top and bottom bars have consistent backdrop styles and vertical spacing. For comparison:

<picture style="min-width: 40%; display: inline-block;"> <source srcset="toolbar-view-spacing-dark.png" media="(prefers-color-scheme: dark)"> <img src="toolbar-view-spacing.png" alt="toolbar-view-spacing"> </picture> <picture style="min-width: 40%; display: inline-block;"> <source srcset="toolbar-view-spacing-box-dark.png" media="(prefers-color-scheme: dark)"> <img src="toolbar-view-spacing-box.png" alt="toolbar-view-spacing-box"> </picture>

Any top and bottom bars can also be dragged to move the window, equivalent to putting them into a gtk.window_handle.WindowHandle.

Content is typically place between top and bottom bars, but can also extend behind them. This is controlled with the property@ToolbarView:extend-content-to-top-edge and property@ToolbarView:extend-content-to-bottom-edge properties.

Top and bottom bars can be hidden and revealed with an animation using the property@ToolbarView:reveal-top-bars and property@ToolbarView:reveal-bottom-bars properties.

adw.toolbar_view.ToolbarView as gtk.buildable.Buildable

The adw.toolbar_view.ToolbarView implementation of the gtk.buildable.Buildable interface supports adding a top bar by specifying “top” as the “type” attribute of a <child> element, or adding a bottom bar by specifying “bottom”.

Accessibility

adw.toolbar_view.ToolbarView uses the gtk.types.AccessibleRole.Group role.