An adaptive container acting like a box or an overlay.
<picture> <source srcset="flap-wide-dark.png" media="(prefers-color-scheme: dark)"> <img src="flap-wide.png"
alt="flap-wide"> </picture> <picture> <source srcset="flap-narrow-dark.png" media="(prefers-color-scheme: dark)">
<img src="flap-narrow.png" alt="flap-narrow"> </picture>
The `AdwFlap` widget can display its children like a [[email protected]] does or like a [[email protected]] does, according to the [
property@Flap:fold-policy] value.
`AdwFlap` has at most three children: [property@Flap:content], [property@Flap:flap] and [property@Flap:separator]. Content is the primary
child, flap is displayed next to it when unfolded, or overlays it when folded. Flap can be shown or hidden by changing the [
property@Flap:reveal-flap] value, as well as via swipe gestures if [property@Flap:swipe-to-open] and/or [property@Flap:swipe-to-close] are
set to `TRUE`.
Optionally, a separator can be provided, which would be displayed between the content and the flap when there's no shadow to separate
them, depending on the transition type.
[property@Flap:flap] is transparent by default; add the [`.background`](style-classes.html#background) style class to it if this is
unwanted.
If [property@Flap:modal] is set to `TRUE`, content becomes completely inaccessible when the flap is revealed while folded.
The position of the flap and separator children relative to the content is determined by orientation, as well as the [
property@Flap:flap-position] value.
Folding the flap will automatically hide the flap widget, and unfolding it will automatically reveal it. If this behavior is not desired,
the [property@Flap:locked] property can be used to override it.
Common use cases include sidebars, header bars that need to be able to overlap the window content (for example, in fullscreen mode) and
bottom sheets.
AdwFlap as GtkBuildable
The `AdwFlap` implementation of the [[email protected]] interface supports setting the flap child by specifying “flap” as the
“type” attribute of a `<child>` element, and separator by specifying “separator”. Specifying “content” child type or
omitting it results in setting the content child.
CSS nodes
`AdwFlap` has a single CSS node with name `flap`. The node will get the style classes `.folded` when it is folded, and `.unfolded` when
it's not.