When there is enough space the children are displayed side by side, otherwise
only one is displayed and the leaflet is said to be “folded”.
The threshold is dictated by the preferred minimum sizes of the children.
When a leaflet is folded, the children can be navigated using swipe gestures.
The “over” and “under” transition types stack the children one on top of the
other, while the “slide” transition puts the children side by side. While
navigating to a child on the side or below can be performed by swiping the
current child away, navigating to an upper child requires dragging it from
the edge where it resides. This doesn't affect non-dragging swipes.
adw.leaflet.Leaflet has a single CSS node with name leaflet. The node will get the
style classes .folded when it is folded, .unfolded when it's not, or none
if it hasn't computed its fold yet.
An adaptive container acting like a box or a stack.
<picture> <source srcset="leaflet-wide-dark.png" media="(prefers-color-scheme: dark)"> <img src="leaflet-wide.png" alt="leaflet-wide"> </picture> <picture> <source srcset="leaflet-narrow-dark.png" media="(prefers-color-scheme: dark)"> <img src="leaflet-narrow.png" alt="leaflet-narrow"> </picture>
The adw.leaflet.Leaflet widget can display its children like a gtk.box.Box does or like a gtk.stack.Stack does, adapting to size changes by switching between the two modes.
When there is enough space the children are displayed side by side, otherwise only one is displayed and the leaflet is said to be “folded”. The threshold is dictated by the preferred minimum sizes of the children. When a leaflet is folded, the children can be navigated using swipe gestures.
The “over” and “under” transition types stack the children one on top of the other, while the “slide” transition puts the children side by side. While navigating to a child on the side or below can be performed by swiping the current child away, navigating to an upper child requires dragging it from the edge where it resides. This doesn't affect non-dragging swipes.
CSS nodes
adw.leaflet.Leaflet has a single CSS node with name leaflet. The node will get the style classes .folded when it is folded, .unfolded when it's not, or none if it hasn't computed its fold yet.