AdwViewSwitcher

Preview

CSS Node Tree

viewswitcher[.wide|.narrow]
└── button.toggle.flat[.horizontal|.vertical][:checked]
    └── stack
        └── box.wide|box.narrow
            ├── indicatorbin[.needs-attention][.badge]
            │   ├── mask
            │   ├── indicator
            │   │   └── [label.numeric]
            │   └── image
            └── label

Props

Behavior

• Every button shows an icon and a label: side by side with policy="wide", the icon above the label with policy="narrow". A page without iconName shows the image-missing icon.
• Without activePageName the switcher keeps its own selection, starting on the first visible page.
• Tab focuses the selected button, and the arrow keys move between buttons. Clicking a button doesn't take the keyboard focus.
• Holding a drag over a button for half a second selects its page.

Adwaita Documentation →

AdwViewSwitcherBar

A bar for the bottom of a window, holding a narrow view switcher. It's shown when reveal is set and there are at least two visible pages.

CSS Node Tree

viewswitcherbar
└── actionbar
    └── revealer
        └── box
            ├── box.start
            ├── viewswitcher.narrow
            └── box.end

Props

Adwaita Documentation →