mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-11 14:52:54 +01:00
53f0d6320e
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com> Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com> Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com> Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
75 lines
3.2 KiB
Markdown
75 lines
3.2 KiB
Markdown
---
|
|
hide_title: true
|
|
hide_table_of_contents: true
|
|
title: Group
|
|
---
|
|
|
|
<##head##>
|
|
|
|
# Group
|
|
|
|
This node is a styleable container. It can have other visual nodes nested inside of it.
|
|
|
|
<div className="ndl-image-with-background l">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
The <span className="ndl-node">Group</span> is the most essential node when it comes to creating layouts and arranging visual elements.
|
|
|
|
<div className="ndl-image-with-background l">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<##head##>
|
|
|
|
**Group** nodes are typically used to layout children by stacking (the default), but can also be used to simply provide margins and padding to a group of visual nodes. To learn more about **Group** nodes check out the [Layouting guide](/docs/guides/user-interfaces/layout).
|
|
|
|
## Inputs
|
|
|
|
Many of the UI nodes share the same inputs. Please refer to the [Visual Input Properties](/nodes/shared-props/inputs/visual-input-properties) documentation.
|
|
|
|
This node supports the following properties:
|
|
|
|
- [Margin](/nodes/shared-props/inputs/visual-input-properties#margin)
|
|
- [Padding](/nodes/shared-props/inputs/visual-input-properties#padding)
|
|
- [Alignment](/nodes/shared-props/inputs/visual-input-properties#alignment)
|
|
- [Dimensions](/nodes/shared-props/inputs/visual-input-properties#dimensions)
|
|
- [Layout](/nodes/shared-props/inputs/visual-input-properties#layout)
|
|
- [Align and justify content](/nodes/shared-props/inputs/visual-input-properties#align-and-justify-content)
|
|
- [Scroll](/nodes/shared-props/inputs/visual-input-properties#scroll)
|
|
- [Style](/nodes/shared-props/inputs/visual-input-properties#style)
|
|
- [Border Style](/nodes/shared-props/inputs/visual-input-properties#border-style)
|
|
- [Corner Radius](/nodes/shared-props/inputs/visual-input-properties#corner-radius)
|
|
- [Box Shadow](/nodes/shared-props/inputs/visual-input-properties#box-shadow)
|
|
- [Placement](/nodes/shared-props/inputs/visual-input-properties#placement)
|
|
- [Dimension Constraints](/nodes/shared-props/inputs/visual-input-properties#dimension-constraints)
|
|
- [Focus](/nodes/shared-props/inputs/visual-input-properties#focus)
|
|
- [Other](/nodes/shared-props/inputs/visual-input-properties#other)
|
|
- [Advanced HTML](/nodes/shared-props/inputs/visual-input-properties#advanced-html)
|
|
|
|
## Outputs
|
|
|
|
Many of the UI nodes share the same outputs. Please refer to the [Visual Output Properties](/nodes/shared-props/outputs/visual-output-properties) documentation.
|
|
|
|
This node supports the following properties:
|
|
|
|
- [Scrolling](/nodes/shared-props/outputs/visual-output-properties#scrolling)
|
|
- [Bounding Box](/nodes/shared-props/outputs/visual-output-properties#bounding-box)
|
|
- [Mounted](/nodes/shared-props/outputs/visual-output-properties#mounted)
|
|
- [Pointer Events](/nodes/shared-props/outputs/visual-output-properties#pointer-events)
|
|
- [Hover Events](/nodes/shared-props/outputs/visual-output-properties#hover-events)
|
|
- [Focus](/nodes/shared-props/outputs/visual-output-properties#focus)
|
|
- [Other](/nodes/shared-props/outputs/visual-output-properties#other)
|
|
|
|
<div className="hidden-props-for-editor">
|
|
|
|
@include "../shared-props/inputs/_visual-input-properties.md"
|
|
|
|
@include "../shared-props/outputs/_visual-output-properties.md"
|
|
|
|
</div>
|