diff --git a/tutorials/ui/gui_containers.rst b/tutorials/ui/gui_containers.rst index 258a68103..4110db08f 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 000000000..de14872ec 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 000000000..850f188c8 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 000000000..aaff63e5f 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 000000000..321f08471 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 000000000..f809b5da7 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 000000000..94bacd538 Binary files /dev/null and b/tutorials/ui/img/containers_hflow_drag.webp differ