Skip to main content

Variable: AdwToggleGroup

const AdwToggleGroup: "AdwToggleGroup"

Defined in: generated/jsx.ts:20568

A group of exclusive toggles.

toggle-group

AdwToggleGroup presents a set of exclusive toggles, represented as Toggle objects. Each toggle can display an icon, a label, an icon and a label, or a custom child.

Toggles are indexed by their position, with the first toggle being equivalent to 0, and so on. Use the ToggleGroup.active to get that position.

Toggles can also have optional names, set via the Toggle.name property. The name of the active toggle can be accessed via the ToggleGroup.active-name property.

AdwToggle objects can be retrieved via their index or name, using ToggleGroup.get_toggle or ToggleGroup.get_toggle_by_name respectively. AdwToggleGroup also provides a Gtk.SelectionModel of its toggles via the ToggleGroup.toggles property.

AdwToggleGroup is orientable, and the toggles can be displayed horizontally or vertically. This is mostly useful for icon-only toggles.

Use the ToggleGroup.homogeneous property to make the toggles take the same size, and the ToggleGroup.can-shrink to control whether the toggles can ellipsize.

Example of an AdwToggleGroup UI definition:

 <object class="AdwToggleGroup">
   <property name="active-name">picture</property>
   <child>
     <object class="AdwToggle">
       <property name="icon-name">camera-photo-symbolic</property>
       <property name="tooltip" translatable="yes">Picture Mode</property>
       <property name="name">picture</property>
     </object>
   </child>
   <child>
     <object class="AdwToggle">
       <property name="icon-name">camera-video-symbolic</property>
       <property name="tooltip" translatable="yes">Recording Mode</property>
       <property name="name">recording</property>
     </object>
   </child>
 </object>

See also: InlineViewSwitcher.

CSS nodes​

AdwToggleGroup has a main CSS node with the name toggle-group.

Its toggles have CSS nodes with the name toggle, and its separators have nodes with the name separator.

Toggle nodes will have a different style classes depending on their content: .text-button for labels, .image-button for icons, .image-text-button for both or no style class for custom children.

The hidden separators use the .hidden style class.

Style classes​

AdwToggleGroup can use the .flat style class to remove its background and make it look like a group of buttons.

toggle-group-flat

It can also use the .round style class to make its toggles and the group itself rounded.

toggle-group-round

They can also be combined with each other.

toggle-group-flat-round

Accessibility​

AdwToggleGroup uses the GTK_ACCESSIBLE_ROLE_RADIO_GROUP role. Its toggles use the GTK_ACCESSIBLE_ROLE_RADIO role.