Skip to content

Update the Using Containers tutorial #10934

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
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
29 changes: 17 additions & 12 deletions tutorials/ui/gui_containers.rst
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
:article_outdated: True

.. _doc_gui_containers:

Using Containers
Expand Down Expand Up @@ -141,12 +139,19 @@ It respects both the horizontal and vertical sizing options.

.. image:: img/containers_panel.png

This container is useful as top-level, or just to add custom backgrounds to sections of a layout.
This container is useful as a top-level control, or just to add custom backgrounds to sections of a layout.

FoldableContainer
~~~~~~~~~~~~~~~~~

A container that can be expanded/collapsed
(via :ref:`FoldableContainer <class_FoldableContainer>`).
Child controls are hidden when it is collapsed.

ScrollContainer
~~~~~~~~~~~~~~~

Accepts a single child node. If this node is bigger than the container, scrollbars will be added
Accepts a single child node. If the child node is bigger than the container, scrollbars will be added
to allow panning the node around (via :ref:`ScrollContainer <class_ScrollContainer>`). Both
vertical and horizontal size options are respected, and the behavior can be turned on or off
per axis in the properties.
Expand All @@ -170,30 +175,30 @@ It has multiple stretch modes, providing options for adjusting the child control

.. image:: img/containers_aspectratio.webp

useful when you have a container that needs to be dynamic and responsive to different screen sizes,
It is 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,
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.
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.
It is 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.
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
Expand All @@ -210,7 +215,7 @@ Creating custom Containers
--------------------------

It is possible to create a custom container using a script.
Here is an example of a container that fits children to its rect size:
Here is an example of a container that fits children to its size:

.. tabs::
.. code-tab:: gdscript GDScript
Expand All @@ -222,7 +227,7 @@ Here is an example of a container that fits children to its rect size:
# Must re-sort the children
for c in get_children():
# Fit to own size
fit_child_in_rect(c, Rect2(Vector2(), rect_size))
fit_child_in_rect(c, Rect2(Vector2(), size))

func set_some_setting():
# Some setting changed, ask for children re-sort.
Expand All @@ -242,7 +247,7 @@ Here is an example of a container that fits children to its rect size:
foreach (Control c in GetChildren())
{
// Fit to own size
FitChildInRect(c, new Rect2(new Vector2(), RectSize));
FitChildInRect(c, new Rect2(new Vector2(), Size));
}
}
}
Expand Down
Loading