AdwViewSwitcher

An adaptive view switcher.

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

An adaptive view switcher designed to switch between multiple views contained in a class@ViewStack in a similar fashion to gtk.stack_switcher.StackSwitcher.

adw.view_switcher.ViewSwitcher buttons always have an icon and a label. They can be displayed side by side, or icon on top of the label. This can be controlled via the property@ViewSwitcher:policy property.

adw.view_switcher.ViewSwitcher is intended to be used in a header bar together with class@ViewSwitcherBar at the bottom of the window, and a class@Breakpoint showing the view switcher bar on narrow sizes, while removing the view switcher from the header bar, as follows:

<object class="AdwWindow">
  <property name="width-request">360</property>
  <property name="height-request">200</property>
  <child>
    <object class="AdwBreakpoint">
      <condition>max-width: 550sp</condition>
      <setter object="switcher_bar" property="reveal">True</setter>
      <setter object="header_bar" property="title-widget"/>
    </object>
  </child>
  <property name="content">
    <object class="AdwToolbarView">
      <child type="top">
        <object class="AdwHeaderBar" id="header_bar">
          <property name="title-widget">
            <object class="AdwViewSwitcher">
              <property name="stack">stack</property>
              <property name="policy">wide</property>
            </object>
          </property>
        </object>
      </child>
      <property name="content">
        <object class="AdwViewStack" id="stack"/>
      </property>
      <child type="bottom">
        <object class="AdwViewSwitcherBar" id="switcher_bar">
          <property name="stack">stack</property>
        </object>
      </child>
    </object>
  </property>
</object>

It's recommended to set property@ViewSwitcher:policy to adw.types.ViewSwitcherPolicy.Wide in this case.

You may have to adjust the breakpoint condition for your specific pages.

CSS nodes

adw.view_switcher.ViewSwitcher has a single CSS node with name viewswitcher. It can have the style classes .wide and .narrow, matching its policy.

Accessibility

adw.view_switcher.ViewSwitcher uses the gtk.types.AccessibleRole.TabList role and uses the gtk.types.AccessibleRole.Tab for its buttons.