@gtkx/react / AdwViewStack

Variable: AdwViewStack

const AdwViewStack: (props) => ReactNode & object

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

A view container for ViewSwitcher.

AdwViewStack is a container which only shows one page at a time. It is typically used to hold an application's main views.

It doesn't provide a way to transition between pages. Instead, a separate widget such as ViewSwitcher can be used with AdwViewStack to provide this functionality.

AdwViewStack pages can have a title, an icon, an attention request, and a numbered badge that ViewSwitcher will use to let users identify which page is which. Set them using the ViewStackPage.title, ViewStackPage.icon-name, ViewStackPage.needs-attention, and ViewStackPage.badge-number properties.

Unlike Gtk.Stack, transitions between views can only be animated via a crossfade and size changes are always interpolated. Animations are disabled by default. Use ViewStack.enable-transitions to enable them.

AdwViewStack maintains a ViewStackPage object for each added child, which holds additional per-child properties. You obtain the ViewStackPage for a child with ViewStack.get_page and you can obtain a Gtk.SelectionModel containing all the pages with ViewStack.get_pages.

AdwViewStack as GtkBuildable

To set child-specific properties in a .ui file, create ViewStackPage objects explicitly, and set the child widget as a property on it:

  <object class="AdwViewStack" id="stack">
    <child>
      <object class="AdwViewStackPage">
        <property name="name">overview</property>
        <property name="title">Overview</property>
        <property name="child">
          <object class="AdwStatusPage">
            <property name="title">Welcome!</property>
          </object>
        </property>
      </object>
    </child>
  </object>

CSS nodes

AdwViewStack has a single CSS node named stack.

Accessibility

AdwViewStack uses the GTK_ACCESSIBLE_ROLE_TAB_PANEL for the stack pages which are the accessible parent objects of the child widgets.

Type Declaration

Name	Type	Defined in
Page()	(props) => ReactNode	packages/react/src/generated/compounds.ts:1376