AdwActionRow

Preview

CSS Node Tree

row[.activatable]
  └── box.header
      ├── box.prefixes
      ├── image.icon
      ├── box.title (vertical)
      │   ├── label.title
      │   └── label.subtitle
      └── box.suffixes

Props

Prefix & Suffix Widgets

Use the prefixWidget and suffixWidget props (children go into the suffixes too). Like in GTK, they fill the row's height unless they set valign:

<AdwActionRow
  title="Volume"
  prefixWidget={<GtkImage iconName="AudioVolumeHigh" />}
  suffixWidget={<GtkScale value={75} min={0} max={100} hexpand valign="center" />}
/>

Activation

An activatable row has hover and press states, and calls onActivated when it's clicked or when Enter or Space is pressed on it. Clicks on a button, check button or switch inside the row stay with that widget.

With activatableWidget, a ref to a check button, switch or button in the row, activating the row activates that widget (an entry gets the focus instead), and the row is activatable while the widget is sensitive.

Style Classes

Adwaita Documentation →