diff --git a/tutorials/ui/gui_containers.rst b/tutorials/ui/gui_containers.rst index 258a6810322..4110db08fa6 100644 --- a/tutorials/ui/gui_containers.rst +++ b/tutorials/ui/gui_containers.rst @@ -159,6 +159,46 @@ Mouse wheel and touch drag (when touch is available) are also valid ways to pan As in the example above, one of the most common ways to use this container is together with a *VBoxContainer* as child. +AspectRatioContainer +^^^^^^^^^^^^^^^^^^^^ + +A container type that arranges its child controls in a way that preserves their proportions +automatically when the container is resized. +(via :ref:`AspectRatioContainer `). +It has multiple stretch modes, providing options for adjusting the child controls' sizes concerning the container: +"fill," "width control height," "height control width," and "cover." + + .. image:: img/containers_aspectratio.webp + +useful when you have a container that needs to be dynamic and responsive to different screen sizes, +and you want the child elements to scale proportionally without losing their intended shapes. + + .. image:: img/containers_aspectratio_drag.webp + +FlowContainer +^^^^^^^^^^^^^^ + +FlowContainer is a container that arranges its child controls either horizontally or vertically, +(via :ref:`HFlowContainer ` and via :ref:`VFlowContainer `). +and when the available space runs out, it wraps the children to the next line or column, similar to how text wraps in a book. + + + .. image:: img/containers_hflow.webp + +useful for creating flexible layouts where the child controls adjust automatically to the available space without overlapping. + + .. image:: img/containers_hflow_drag.webp + +CenterContainer +^^^^^^^^^^^^^^^^^^^^ + +CenterContainer is a container that automatically keeps all of its child controls centered within it at their minimum size. +It ensures that the child controls are always aligned to the center, making it easier to create centered layouts without manual positioning. +(via :ref:`CenterContainer `). + + .. image:: img/containers_center.webp + + .. image:: img/containers_center_drag.webp SubViewportContainer ^^^^^^^^^^^^^^^^^^^^ diff --git a/tutorials/ui/img/containers_aspectratio.webp b/tutorials/ui/img/containers_aspectratio.webp new file mode 100644 index 00000000000..de14872ec9e Binary files /dev/null and b/tutorials/ui/img/containers_aspectratio.webp differ diff --git a/tutorials/ui/img/containers_aspectratio_drag.webp b/tutorials/ui/img/containers_aspectratio_drag.webp new file mode 100644 index 00000000000..850f188c85a Binary files /dev/null and b/tutorials/ui/img/containers_aspectratio_drag.webp differ diff --git a/tutorials/ui/img/containers_center.webp b/tutorials/ui/img/containers_center.webp new file mode 100644 index 00000000000..aaff63e5fff Binary files /dev/null and b/tutorials/ui/img/containers_center.webp differ diff --git a/tutorials/ui/img/containers_center_drag.webp b/tutorials/ui/img/containers_center_drag.webp new file mode 100644 index 00000000000..321f0847152 Binary files /dev/null and b/tutorials/ui/img/containers_center_drag.webp differ diff --git a/tutorials/ui/img/containers_hflow.webp b/tutorials/ui/img/containers_hflow.webp new file mode 100644 index 00000000000..f809b5da741 Binary files /dev/null and b/tutorials/ui/img/containers_hflow.webp differ diff --git a/tutorials/ui/img/containers_hflow_drag.webp b/tutorials/ui/img/containers_hflow_drag.webp new file mode 100644 index 00000000000..94bacd538aa Binary files /dev/null and b/tutorials/ui/img/containers_hflow_drag.webp differ