Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions tutorials/ui/gui_containers.rst
Original file line number Diff line number Diff line change
Expand Up @@ -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 <class_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 <class_HFlowContainer>` and via :ref:`VFlowContainer <class_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 <class_CenterContainer>`).

.. image:: img/containers_center.webp

.. image:: img/containers_center_drag.webp

SubViewportContainer
^^^^^^^^^^^^^^^^^^^^
Expand Down
Binary file added tutorials/ui/img/containers_aspectratio.webp
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added tutorials/ui/img/containers_aspectratio_drag.webp
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added tutorials/ui/img/containers_center.webp
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added tutorials/ui/img/containers_center_drag.webp
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added tutorials/ui/img/containers_hflow.webp
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added tutorials/ui/img/containers_hflow_drag.webp
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.