diff --git a/tutorials/ui/gui_containers.rst b/tutorials/ui/gui_containers.rst index f08cee990d5..166581078f2 100644 --- a/tutorials/ui/gui_containers.rst +++ b/tutorials/ui/gui_containers.rst @@ -1,5 +1,3 @@ -:article_outdated: True - .. _doc_gui_containers: Using Containers @@ -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 `). +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 `). Both vertical and horizontal size options are respected, and the behavior can be turned on or off per axis in the properties. @@ -170,7 +175,7 @@ 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 @@ -178,14 +183,14 @@ and you want the child elements to scale proportionally without losing their int 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 ` 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. +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 @@ -193,7 +198,7 @@ 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 `). .. image:: img/containers_center.webp @@ -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 @@ -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. @@ -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)); } } }