durbok/noodl-docs
1
0
Fork 0
mirror of https://github.com/noodlapp/noodl-docs.git synced 2026-01-11 23:02:54 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source 
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>
This commit is contained in:
Eric Tuvesson
2023-09-05 12:08:55 +02:00
commit 53f0d6320e
2704 changed files with 76354 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
nodes/basic-elements/circle.md Normal file
View File

@@ -0,0 +1,64 @@
---
hide_title: true
hide_table_of_contents: true
title: Circle
---
<##head##>
# Circle
This node places a circle (or a circle segment) in the visual tree. It features a wide range of design options.
<div className="ndl-image-with-background l">
![](/nodes/basic-elements/circle/circle_visual.png)
</div>
<##head##>
## Inputs
| Data | Description |
| ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Size</span> | Specifies the size of the Circle in pixels. |
| <span className="ndl-data">Start Angle</span> | The start angle of the Circle segment. |
| <span className="ndl-data">End Angle</span> | The end angle of the Circle segment. |
| <span className="ndl-data">Fill</span> | Specify whether the Cirlce should be filled or not. |
| <span className="ndl-data">Fill Color</span> | Specify the fill color. |
| <span className="ndl-data">Stroke</span> | Enables the stroke of the Circle. |
| <span className="ndl-data">Stroke Width</span> | Sets the width of the Circle stroke. |
| <span className="ndl-data">Stroke Color</span> | Sets the stroke color of the Circle stroke. |
| <span className="ndl-data">Line Cap</span> | Specifies what kind of cap there will be on the circle stroke.<br/><br/>`Butt`: A direct cut, not rounded end of the circle stroke.<br/>`Round`: A round end to the circle stroke. |
### Visual
This node supports the following [Visual Input Properties](/nodes/shared-props/inputs/visual-input-properties):
- [Margin](/nodes/shared-props/inputs/visual-input-properties#margin)
- [Alignment](/nodes/shared-props/inputs/visual-input-properties#alignment)
- [Layout, Position](/nodes/shared-props/inputs/visual-input-properties#position)
- [Placement](/nodes/shared-props/inputs/visual-input-properties#placement)
- [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:
- [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)
- [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>

57
nodes/basic-elements/columns.md Normal file
View File

@@ -0,0 +1,57 @@
---
hide_title: true
hide_table_of_contents: true
title: Columns
---
<##head##>
# Columns
This node is used to layout your content in columns with gaps.
<div className="ndl-image-with-background l">
![](/nodes/basic-elements/columns/columns_visual.png)
</div>
The <span className="ndl-node">Columns</span> node does not have any own styling attached to it. Instead it arranges all its children into dynamic layouts using **layout strings**.
## Layout strings
A layout string is simply a string of numbers with spaces between them. Every number represents a fraction of the full container width and is converted to a column. A <span className="ndl-node">Columns</span> node with the layout string `1 2 1` that contains 5 children will be rendered like this:
<div className="ndl-image-with-background l">
![](/nodes/basic-elements/columns/columns_example.png)
</div>
<##head##>
## Responsive layouts
### Using the Min Column Width value
The easiest way of making the columns responsive is by setting the <span class="ndl-data">Min Column Width</span> value. This will check if the columns will fit with your specified <span class="ndl-data">Layout String</span>. If the container can't fit the columns when they are at their Min Width, the layout will fold into a grid with fewer columns.
Make sure the children you pass are set to a width of `100%` of their parent.
### Using different layout strings
Advanced responsive layouts can easily be created by passing different values to the <span class="ndl-data">Layout String</span> input using a [States](/nodes/utilities/logic/states) node and the [Media Queries](/library/prefabs/media-query/) prefab.
Make sure the children you pass are set to a width of `100%` of their parent.
## Inputs
| Data | Description |
| -------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Layout String</span> | Determines the size and layout of the columns that the children are rendered into. |
| <span className="ndl-data">Horizontal Gap</span> | The horizontal spacing between the columns in `px`. |
| <span className="ndl-data">Vertical Gap</span> | The vertical spacing between the columns in `px`. |
| <span className="ndl-data">Layout Direction</span> | If the columns should be rendered horizontally or vertically. |
| <span className="ndl-data">Min Column Width</span> | The smallest the columns are allowed to be before they fold into a layout with fewer columns. |
| <span className="ndl-data">Mounted</span> | If the columns node should be rendered in the app or not. |
| <span className="ndl-data">Justify Content</span> | The position of children in unfilled rows. |

74
nodes/basic-elements/group.md Normal file
View File

@@ -0,0 +1,74 @@
---
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">
![](/nodes/basic-elements/group/group_visual.png)
</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">
![](/nodes/basic-elements/group/group_node.png)
</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>

72
nodes/basic-elements/icon.md Normal file
View File

@@ -0,0 +1,72 @@
---
hide_title: true
hide_table_of_contents: true
title: Icon
---
<##head##>
# Icon
This node places an icon in the visual tree.
<div className="ndl-image-with-background l">
![](/nodes/basic-elements/icon/icon.png)
</div>
You can use an icon from the built in library, or provide your own image source.
<##head##>
## Dynamic icons
If you want to dynamically pass an icon from the icon library to the **Icon** node you do this through the <span class="ndl-data">Icon Source</span> input.
This input expects an object with a **class** (being the name of the icon library) and **code** (being the icon code that you see when you hover an icon in the icon picker). The easiest way of transforming a string to an icon object is to use a custom function containing the following code:
```js
Outputs.iconObject = {
"class": "material-icons",
"code": Inputs.iconCode,
};
```
This will automatically create an <span className="ndl-data">iconCode</span> input and an <span className="ndl-data">iconObject</span> output.
## Inputs
| Data | Description |
| --------------------------------------------- | --------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Type</span> | Use this to set if you want to use a predefined `icon` or a custom `image` from the project folder. |
| <span className="ndl-data">Icon Source</span> | Where to get the icon. |
| <span className="ndl-data">Size</span> | The width of the icon in `px`. |
| <span className="ndl-data">Color</span> | Sets the color of the icon. Only visible if _Type_ is set to `icon`. |
### Visual
This node supports the following [Visual Input Properties](/nodes/shared-props/inputs/visual-input-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)
- [Layout, Position](/nodes/shared-props/inputs/visual-input-properties#-position)
- [Style](/nodes/shared-props/inputs/visual-input-properties#style)
- [Placement](/nodes/shared-props/inputs/visual-input-properties#placement)
- [Advanced HTML](/nodes/shared-props/inputs/visual-input-properties#advanced-html)
## Outputs
This node supports the following [Visual Output Properties](/nodes/shared-props/outputs/visual-output-properties):
- [Bounding Box](/nodes/shared-props/outputs/visual-output-properties#bounding-box)
- [Mounted](/nodes/shared-props/outputs/visual-output-properties#mounted)
- [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>

59
nodes/basic-elements/image.md Normal file
View File

@@ -0,0 +1,59 @@
---
hide_title: true
hide_table_of_contents: true
title: Image
---
<##head##>
# Image
This node places an image in the visual tree. It features a wide range of design options and blend modes.
The <span className="ndl-data">source</span> can be set from a URL or a file. You can drag images from your computer and drop them into Noodl to add them to the project folder. This will make them selectable as the <span className="ndl-data">source</span> in the <span className="ndl-node">Image</span> nodes Property Panel.
<##head##>
## Inputs
| Data | Description |
| -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Source</span> | The image source path. Choose an image in your project or point to a valid URL that can be accessed. |
| <span className="ndl-data">Source Set</span> | Use this property to specify different image sources for different resolutions making it more responsive. Learn more [here](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images). |
### Visual
This node supports the following [Visual Input Properties](/nodes/shared-props/inputs/visual-input-properties):
- [Margin](/nodes/shared-props/inputs/visual-input-properties#margin)
- [Alignment](/nodes/shared-props/inputs/visual-input-properties#alignment)
- [Dimensions](/nodes/shared-props/inputs/visual-input-properties#dimensions)
- [Layout, Position](/nodes/shared-props/inputs/visual-input-properties#-position)
- [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)
- [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:
- [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)
- [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>

69
nodes/basic-elements/text.md Normal file
View File

@@ -0,0 +1,69 @@
---
hide_title: true
hide_table_of_contents: true
title: Text
---
<##head##>
# Text
This node places a text element in the visual tree. You can use it for both single words as well as paragraphs of text.
<div className="ndl-image-with-background l">
![](/nodes/basic-elements/text/text_visual.png)
</div>
The <span className="ndl-node">Text</span> node can be styled with font family, color, size, and much more.
<div className="ndl-image-with-background l">
![](/nodes/basic-elements/text/text_node.png)
</div>
<##head##>
## Inputs
| Data | Description |
| -------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Text</span> | The text string to display. |
| <span className="ndl-data">Text Align</span> | The alignment of the text string within the Text node's bounding box. |
| <span className="ndl-data">Word Break</span> | Control where line breaks are allowed. <br/><br/> `Normal`: Break on spaces and other whitespace characters <br/>`Break All`: Allow line breaks between any two characters, including inside words |
### Visual
The Text node features the following [Visual Input Properties](/nodes/shared-props/inputs/visual-input-properties).
- [Margin](/nodes/shared-props/inputs/visual-input-properties#margin)
- [Alignment](/nodes/shared-props/inputs/visual-input-properties#alignment)
- [Dimensions](/nodes/shared-props/inputs/visual-input-properties#dimensions)
- [Text Styles](/nodes/shared-props/inputs/visual-input-properties#text-styles)
- [Style](/nodes/shared-props/inputs/visual-input-properties#style)
- [Placement](/nodes/shared-props/inputs/visual-input-properties#placement)
- [Layout, Position](/nodes/shared-props/inputs/visual-input-properties#-position)
- [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 outputs:
- [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)
- [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>

97
nodes/basic-elements/video.md Normal file
View File

@@ -0,0 +1,97 @@
---
hide_title: true
hide_table_of_contents: true
title: Video
---
<##head##>
# Video
This node places a video surface in the visual tree. It features a wide range of design options and settings for playback.
The <span className="ndl-data">source</span> can be set from a URL or a file. You can drag videos from your computer and drop them into Noodl to add them to the project folder. This will make them selectable as the <span className="ndl-data">source</span> in the <span className="ndl-node">Video</span> node Property Panel.
<##head##>
## Inputs
<div className="ndl-table-35-65">
| Signal | Description |
| ------------------------------------------- | -------------------------------------------- |
| <span className="ndl-signal">Play</span> | Signal to start playing the video. |
| <span className="ndl-signal">Pause</span> | Signal to pause the video. |
| <span className="ndl-signal">Restart</span> | Signal to play the video from the beginning. |
| <span className="ndl-signal">Reset</span> | Signal to reset the video to the beginning. |
| Data | Description |
| ------------------------------------------ | -------------------------------------------------------------------------------------- |
| <span className="ndl-data">Source</span> | The source of the video. Either a local file in the project folder or an absolute url. |
| <span className="ndl-data">Poster</span> | An image shown when the video is not started. Choose an image in the project folder. |
| <span className="ndl-data">Autoplay</span> | Sets whether the audio/video should start playing as soon as it is loaded. |
| <span className="ndl-data">Controls</span> | Sets whether the audio/video browser native controls are visible. |
| <span className="ndl-data">Volume</span> | The volume of the video when played. |
| <span className="ndl-data">Muted</span> | Sets whether the audio/video is muted or not. |
| <span className="ndl-data">Loop</span> | Indicates whether the video should loop when the end is reached during playback. |
The Video node also has some special Video Layout properties:
| Data | Description |
| -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Video Position X</span> | The video's X position within the **Video** node's bounding box. |
| <span className="ndl-data">Video Position Y</span> | The video's Y position within the **Video** node's bounding box. |
| <span className="ndl-data">Object Fit</span> | Specifies how the video will behave when scaled to other size than the default size.<br/><br/>`Contain`: The video will be scaled by keeping aspect ratio and making sure the video fits in the bounding box. This may introduce transparent areas within the **Video** node's bounding box.<br/>`Cover`: The video will be scaled by keeping aspect ratio and making sure the video fills the entire bounding box. Portions of the video may be clipped.<br/>`Fill`: The video will fill the bounding box by scaling without keeping aspect ratio.<br/>`None`: The video will not be scaled. May be clipped. |
</div>
### Visual
This node supports the following [Visual Input Properties](/nodes/shared-props/inputs/visual-input-properties):
- [Margin](/nodes/shared-props/inputs/visual-input-properties#margin)
- [Alignment](/nodes/shared-props/inputs/visual-input-properties#alignment)
- [Dimensions](/nodes/shared-props/inputs/visual-input-properties#dimensions)
- [Layout, Position](/nodes/shared-props/inputs/visual-input-properties#-position)
- [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)
- [Other](/nodes/shared-props/inputs/visual-input-properties#other)
- [Advanced HTML](/nodes/shared-props/inputs/visual-input-properties#advanced-html)
## Outputs
<div className="ndl-table-35-65">
| Signal | Description |
| -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">On Can Play</span> | Signal triggered when the video has loaded and is ready to be played. |
| <span className="ndl-signal">On Time Update</span> | Signal triggered when the playing position of the audio/video has changed. Event is invoked both by playing the media as well as when the playback position is being moved (for example when fast forward is being used). |
| Data | Description |
| --------------------------------------------- | ------------------------------------------------------------- |
| <span className="ndl-data">DOM Element</span> | A reference to the DOM Element representing this visual node. |
| <span className="ndl-data">videoWidth</span> | The width of the video source. |
| <span className="ndl-data">videoHeight</span> | The height of the video source. |
</div>
### Visual
This node supports the following [Visual Output Properties](/nodes/shared-props/outputs/visual-output-properties).
- [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)
- [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>