mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-11 23:02:54 +01:00
Initial commit
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
108
nodes/ui-controls/button.md
Normal file
108
nodes/ui-controls/button.md
Normal file
@@ -0,0 +1,108 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Button
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Button
|
||||
|
||||
This node places a customizable button in the visual tree.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The button has a <span className="ndl-signal">Click</span> signal that you can use to trigger actions.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<##head##>
|
||||
|
||||
This control contains all logic such as accessibility etc. It can be styled in via it's properties.
|
||||
Use variations to create different types of buttons
|
||||
|
||||
## Inputs
|
||||
|
||||
The Button can be enabled and disabled using the Enabled input:
|
||||
|
||||
@include "../shared-props/inputs/_enabled.md"
|
||||
|
||||
The Button node has a set of label properties that can be set:
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Enable Label</span> | Sets whether the label is visible or not. |
|
||||
| <span className="ndl-data">Text Style</span> | Set an existing text style to this node, or create a new text style from the current properties. |
|
||||
| <span className="ndl-data">Label</span> | A text string that will be shown as the label on the button. |
|
||||
|
||||
Similarly, it has a set of icon properties:
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------- | --------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Enable Icon</span> | Sets whether the icon is visible or not. |
|
||||
| <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">Source</span> | Where to get the icon. |
|
||||
| <span className="ndl-data">Spacing</span> | The spacing between the text and the icon. |
|
||||
| <span className="ndl-data">Placement</span> | Sets whether the icon should be to the `left` or to the `right` of the _Label_ |
|
||||
| <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)
|
||||
- [Dimensions](/nodes/shared-props/inputs/visual-input-properties#dimensions)
|
||||
- [Layout, Position](/nodes/shared-props/inputs/visual-input-properties#position)
|
||||
- [Text Styles](/nodes/shared-props/inputs/visual-input-properties#text-styles)
|
||||
- [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
|
||||
|
||||
The main output for the button is the Click <span className="ndl-signal">signal</span>:
|
||||
|
||||
| Signal | Description |
|
||||
| ----------------------------------------- | ------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Click</span> | <##output:onClick##>A signal is sent on this output when the button is clicked.<##output##> |
|
||||
|
||||
It also features a set of more in depth <span className="ndl-signal">signals</span>:
|
||||
|
||||
@include "../shared-props/outputs/_control-events.md"
|
||||
|
||||
### States
|
||||
|
||||
Apart from triggering <span className="ndl-signal">signals</span> the Button node also notifies of its state through <span className="ndl-data">data</span> outputs:
|
||||
|
||||
@include "../shared-props/outputs/_control-states.md"
|
||||
|
||||
### 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)
|
||||
- [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>
|
||||
155
nodes/ui-controls/checkbox.md
Normal file
155
nodes/ui-controls/checkbox.md
Normal file
@@ -0,0 +1,155 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Checkbox
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Checkbox
|
||||
|
||||
This node places a customizable checkbox in the visual tree.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The checkbox will flip its state when clicked and its <span className="ndl-data">Checked</span> property can be connected to a data source, such as a <span className="ndl-data">variable</span> or <span className="ndl-data">object</span>.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
This control contains all logic such as accessibility etc. It can be styled in via it's properties, or you can use it only for the logic and create your own checkbox component in your own design system.
|
||||
|
||||
<div className="ndl-image-with-background s">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Inputs
|
||||
|
||||
The main input of the Checkbox node is the <span className="ndl-data">Checked</span> input:
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
| Data | Description |
|
||||
| -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Checked</span> | <##input:checked##>A boolean setting the checkbox in "checked" or "unchecked" state. This is the value of the checkbox and can be connected to a data source.<##input##> |
|
||||
| <span className="ndl-data">Background Color</span> | <##input:backgroundColor##>The background color when the checkbox is "checked"<##input##>. |
|
||||
|
||||
</div>
|
||||
|
||||
It can be enabled and disabled using the <span className="ndl-data">Enabled</span> input:
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "../shared-props/inputs/_enabled.md"
|
||||
|
||||
</div>
|
||||
|
||||
The Checkbox node has a set of label properties that can be set:
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Enable Label</span> | Sets whether the label is visible or not. |
|
||||
| <span className="ndl-data">Text Style</span> | Set an existing text style to this node, or create a new text style from the current properties. |
|
||||
| <span className="ndl-data">Label</span> | A text string that will be shown as the label on the button. |
|
||||
| <span className="ndl-data">Spacing</span> | The spacing between the label and the checkbox. |
|
||||
|
||||
</div>
|
||||
|
||||
Similarly, it has a set of icon properties:
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------- | --------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Enable Icon</span> | Sets whether the icon is visible or not. |
|
||||
| <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">Source</span> | Where to get the icon. |
|
||||
| <span className="ndl-data">Placement</span> | Sets whether the icon should be to the `left` or to the `right` of the _Label_ |
|
||||
| <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`. |
|
||||
|
||||
</div>
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
| Signal | Description |
|
||||
| ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Check</span> | Reflects the same action as the user checked the Checkbox. |
|
||||
| <span className="ndl-signal">Uncheck</span> | Reflects the same action as the user unchecked the Checkbox. |
|
||||
|
||||
</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)
|
||||
- [Other](/nodes/shared-props/inputs/visual-input-properties/#other)
|
||||
- [Advanced HTML](/nodes/shared-props/inputs/visual-input-properties/#advanced-html)
|
||||
|
||||
## Outputs
|
||||
|
||||
The main output of the Checkbox node is the <span className="ndl-data">Checked</span> output.
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
| Data | Description |
|
||||
| ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Checked</span> | <##output:checked##>A boolean output that is true when this checkbox control is checked and false if not. This is useful when using this control as a base for your own component that will represent visually that it is checked.<##output##> |
|
||||
|
||||
</div>
|
||||
|
||||
It also features a set of <span className="ndl-signal">signals</span>:
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "../shared-props/outputs/_control-events.md"
|
||||
|
||||
</div>
|
||||
|
||||
### States
|
||||
|
||||
Apart from triggering <span className="ndl-signal">signals</span> the Checkbox node also notifies of its state through <span className="ndl-data">data</span> outputs:
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "../shared-props/outputs/_control-states.md"
|
||||
|
||||
</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)
|
||||
- [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>
|
||||
122
nodes/ui-controls/dropdown.md
Normal file
122
nodes/ui-controls/dropdown.md
Normal file
@@ -0,0 +1,122 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Dropdown
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Dropdown
|
||||
|
||||
This node places a dropdown input field in the visual tree.
|
||||
The input can for example be used to capture information from a user.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The dropdown takes an array of options as an input,
|
||||
which will be shown in the dropdown for the user to pick from.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## The Incoming Items Format
|
||||
|
||||
The incoming items should be an [Array](/nodes/data/array/array-node) of [Objects](/nodes/data/object/object-node),
|
||||
for example coming from a [Static Array](/nodes/data/array/static-array),
|
||||
[Query Records](/nodes/data/cloud-data/query-records) or a [Function](/nodes/javascript/function) node.
|
||||
|
||||
The **Object** should have two mandatory properties: `Label`, `Value` (note that the case matters, `value` would not work). The `Label` property should contain the string to be shown in the **Dropdown**.
|
||||
The `Value` property will be set on the output **Value** on the **Dropdown**.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Depending on how your original data looks, it may be necessary to use the [Array Map](/nodes/data/array/array-map/) node to re-map values in the original data towards `Label` and `Value`.
|
||||
One useful pattern is to map the `id` of an **Object** to the `Value` property in the **Array Map** to easily access the selected **Object**.
|
||||
The mapping can be achieved through `Value: function (object) { return object.id }`.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Items</span> | <##input:item##>This input takes an **Array** of **Objects** that will populate the **Dropdown**. You should make sure that they have the two properties `Label` and `Value` set as they are used to represent the item in the **Dropdown**.<##input##> |
|
||||
| <span className="ndl-data">Value</span> | <##input:value##>Setting this input will force the **Dropdown** to select the item with the same value set in its `Value` property.<##input##> |
|
||||
| <span className="ndl-data">Placeholder</span> | The placeholder text for when the dropdown is empty. |
|
||||
| <span className="ndl-data">Placeholder Opacity</span> | The opacity of the placeholder text. `0` is completely transparent and invisible. `1` is completely solid and opaque. |
|
||||
|
||||
User interaction can be enabled and disabled:
|
||||
|
||||
@include "../shared-props/inputs/_enabled.md"
|
||||
|
||||
### 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)
|
||||
- [Text Style](/nodes/shared-props/inputs/visual-input-properties/#text-style)
|
||||
- [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)
|
||||
- [Other](/nodes/shared-props/inputs/visual-input-properties/#other)
|
||||
- [Advanced HTML](/nodes/shared-props/inputs/visual-input-properties/#advanced-html)
|
||||
|
||||
## Outputs
|
||||
|
||||
The main output is the following:
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Value</span> | <##output:value##>This output holds the value, i.e. what is in the property `Value` in the currently selected **Object** in the Dropdown.<##output##> |
|
||||
|
||||
| Signal | Description |
|
||||
| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Changed</span> | <##output:changed##>This signal signal is emitted when the selection of the **Dropdown** changes.<##output##> |
|
||||
|
||||
It also features a set of more in depth <span className="ndl-signal">signals</span>:
|
||||
|
||||
@include "../shared-props/outputs/_control-events.md"
|
||||
|
||||
### States
|
||||
|
||||
Apart from triggering <span className="ndl-signal">signals</span> the Dropdown node also notifies of its state through <span className="ndl-data">data</span> outputs:
|
||||
|
||||
@include "../shared-props/outputs/_control-states.md"
|
||||
|
||||
### 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)
|
||||
- [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>
|
||||
78
nodes/ui-controls/radio-button-group.md
Normal file
78
nodes/ui-controls/radio-button-group.md
Normal file
@@ -0,0 +1,78 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Radio Button Group
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Radio Button Group
|
||||
|
||||
This node is a non visual control used to group <span className="ndl-node">Radio Button</span> nodes. The <span className="ndl-node">Radio Button</span> must be placed in a <span className="ndl-node">Radio Button Group</span> node to function properly.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The output of the <span className="ndl-node">Radio Button Group</span> node is the <span className="ndl-data">Value</span> of the selected <span className="ndl-node">Radio Button</span>. Only one <span className="ndl-node">Radio Button</span> in a <span className="ndl-node">Radio Button Group</span> can be selected at the same time.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Value</span> | The value of the current selected radio button. By changing this value will change which radio button is currently selected. |
|
||||
|
||||
It can be enabled and disabled using the <span className="ndl-data">Enabled</span> input:
|
||||
|
||||
@include "../shared-props/inputs/_enabled.md"
|
||||
|
||||
### 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)
|
||||
- [Dimensions](/nodes/shared-props/inputs/visual-input-properties/#dimensions)
|
||||
- [Layout](/nodes/shared-props/inputs/visual-input-properties/)
|
||||
- [Style](/nodes/shared-props/inputs/visual-input-properties/#style)
|
||||
- [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
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------- | ------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Value</span> | The current selected radio button value will be output here. |
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Changed</span> | This event is triggered when the **Value** of the radio button group is changed due to user interaction. |
|
||||
|
||||
### 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)
|
||||
- [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>
|
||||
117
nodes/ui-controls/radio-button.md
Normal file
117
nodes/ui-controls/radio-button.md
Normal file
@@ -0,0 +1,117 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Radio Button
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Radio Button
|
||||
|
||||
This node places a radio button in the visual tree. The <span className="ndl-node">Radio Button</span> must be placed in a <span className="ndl-node">Radio Button Group</span> node to function properly.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
You must specify a unique <span className="ndl-data">Value</span> for each <span className="ndl-node">Radio Button</span> node. Only one <span className="ndl-node">Radio Button</span> in a <span className="ndl-node">Radio Button Group</span> can be selected at once.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
The core radio button has a very simple visual appearance and is most often used in other components as part of a design system. This control contains all logic such as accessibility etc. It can be styled in via it's properties, or you can use it only for the logic and create your own radio button component in your own design system.
|
||||
|
||||
<div className="ndl-image-with-background s">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Inputs
|
||||
|
||||
The main input of the Radio Button node is the <span className="ndl-data">Value</span> input:
|
||||
|
||||
| Data | Description |
|
||||
| -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Value</span> | The value for this radio button. The value of the selected radio button in a radio button group will be passed as the **Value** output of the radio button group. All radio buttons in a group should have unique values. |
|
||||
| <span className="ndl-data">Background Color</span> | The background color when the radio button is "checked". |
|
||||
|
||||
It can be enabled and disabled using the <span className="ndl-data">Enabled</span> input:
|
||||
|
||||
@include "../shared-props/inputs/_enabled.md"
|
||||
|
||||
The Checkbox node has a set of label properties that can be set:
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Enable Label</span> | Sets whether the label is visible or not. |
|
||||
| <span className="ndl-data">Text Style</span> | Set an existing text style to this node, or create a new text style from the current properties. |
|
||||
| <span className="ndl-data">Label</span> | A text string that will be shown as the label on the button. |
|
||||
| <span className="ndl-data">Spacing</span> | The spacing between the label and the checkbox. |
|
||||
|
||||
Similarly, it has a set of icon properties:
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------- | --------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Enable Icon</span> | Sets whether the icon is visible or not. |
|
||||
| <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">Source</span> | Where to get the icon. |
|
||||
| <span className="ndl-data">Placement</span> | Sets whether the icon should be to the `left` or to the `right` of the _Label_ |
|
||||
| <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)
|
||||
- [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)
|
||||
- [Other](/nodes/shared-props/inputs/visual-input-properties/#other)
|
||||
- [Advanced HTML](/nodes/shared-props/inputs/visual-input-properties/#advanced-html)
|
||||
|
||||
## Outputs
|
||||
|
||||
The main output of the Radio Button node is the <span className="ndl-data">Checked</span> output.
|
||||
|
||||
| Data | Description |
|
||||
| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Checked</span> | A boolean output that is true when this radio button control is checked and false if not. This is useful when using this control as a base for your own component that will represent visually that it is checked. |
|
||||
|
||||
It also features a set of <span className="ndl-signal">signals</span>:
|
||||
|
||||
@include "../shared-props/outputs/_control-events.md"
|
||||
|
||||
### States
|
||||
|
||||
Apart from triggering <span className="ndl-signal">signals</span> the Checkbox node also notifies of its state through <span className="ndl-data">data</span> outputs:
|
||||
|
||||
@include "../shared-props/outputs/_control-states.md"
|
||||
|
||||
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>
|
||||
36
nodes/ui-controls/repeater-item.md
Normal file
36
nodes/ui-controls/repeater-item.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Repeater Item
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Repeater Item
|
||||
|
||||
This node contains a set of useful utilities for components that have been dynamically created by a <span className="ndl-node">Repeater</span> node.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Signal | Description |
|
||||
| ---------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Remove Completed</span> | Send a signal, after _Try Remove_ has been sent and any remove animation is completed. This will remove the component from its parent. See _Try Remove_ below to learn more. |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Data | Description |
|
||||
| ----------------------------------------- | ----------------------------------- |
|
||||
| <span className="ndl-data">Item Id</span> | The object _Id_ for this component. |
|
||||
|
||||
| Signal | Description |
|
||||
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Added</span> | When a new object is added to an array, any connected [Repeater](/nodes/ui-controls/repeater) node will create a new component. This component will get the _Added_ signal. Useful for playing animations or changing states. |
|
||||
| <span className="ndl-signal">Try Remove</span> | When an object is removed from am array, any connected [Repeater](/nodes/ui-controls/repeater) node will remove the component it created for that object. If this signal is connected the _Remove Completed_ input should be used to signal when animations are complete. |
|
||||
94
nodes/ui-controls/repeater.md
Normal file
94
nodes/ui-controls/repeater.md
Normal file
@@ -0,0 +1,94 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Repeater
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Repeater
|
||||
|
||||
This node is used to dynamically insert visual components based on <span className="ndl-data">array</span> data.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The <span className="ndl-node">Repeater</span> node takes data from a Noodl <span className="ndl-data">Array</span> and generates an existing visual component for each item in the <span className="ndl-data">Array</span>. The [Object](/nodes/data/object/object-node) or [Record](/nodes/data/cloud-data/record) associated with the visual component can then be used to populate the component with data.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
More details can be found in the [guide](/docs/guides/data/list-basics).
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Template Type</span> | This input is used to enable or disable dynamic templates. The input can be:<br/><br/>`Explicit`: The same _Component_ will be used for all items.<br/>`Dynamic`: Use code to choose what _Component_ to create for each item. In this case you will have to set the **Script** input. |
|
||||
| <span className="ndl-data">Script</span> | Available when **Template Type** is set to **Dynamic** or after chosing a _Component_ for a **Explicit** template type . Write a script to map input or choose what Component to create for every item (see below). |
|
||||
| <span className="ndl-data">Component</span> | Only available when **Template Type** is set to **Explicit**. Choose a component from your project that will be used as template to dynamically create component instances for each object in the Items array. |
|
||||
| <span className="ndl-data">Items</span> | <##input:items##>An array of [Objects](/nodes/data/object/object-node) or [Records](/nodes/data/cloud-data/record) that will be used to dynamically create components.<##input##> |
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Refresh</span> | <##input:refresh##>By sending a signal to this input all items in the **Repeater** will be removed and then recreated.<##input##> |
|
||||
|
||||
### Script
|
||||
|
||||
Here you can put an script that will do one of two things. Either the script
|
||||
a) Maps the properties of the objects in the **Items** array to component inputs of the template component instances created by the **Repeater** node. This is only available if **Template Type** is set to **Explicit**. (see _Mapping Inputs_ below), or b) Chooses which template component to use for each item in the item array provided to the **Repeater** node. This is only available (and mandatory) if the **Template Type** is set to **Dynamic**. (see _Dynamic Template Types_ below).
|
||||
|
||||
#### Mapping Inputs
|
||||
|
||||
```javascript
|
||||
map({
|
||||
Label: 'Full Name',
|
||||
State: () => object.get('Married') === 'Yes',
|
||||
})
|
||||
```
|
||||
|
||||
By default the mapping is simply directly from object properties to component inputs. But you can use the script to change that mapping, in the example above the _Full Name_ property of the incoming object is mapped to the _Label_ component input. You can also use the script to do conversions of types by providing a function.
|
||||
This could for example be useful when having a generic list item, that's used with various types of data arrays with different data models and properties.
|
||||
|
||||
#### Dynamic Template Types
|
||||
|
||||
By setting **Template type** to **Dynamic** you can use a script to determine which component that should be used for each item in the object **Array**. This could for example be useful if different items should have different visual representation and functionality tied to them.
|
||||
You have to provide a script that determines which template to be used. The script will be called once for each object in the item array provided to the **Repeater** node. The script has has one input variable _item_ which is the current item. This can be used to get properties from the object. The script should set the variable _component_ to the path to the component to use as a template for the item. Note, this is a string containing the path, beginning with a "/", to the component in the Noodl project.
|
||||
|
||||
```javascript
|
||||
let basePath = '/#My Sheet/ListItems'
|
||||
if (item.type === 'header') {
|
||||
component = basePath + '/HeaderItem'
|
||||
} else {
|
||||
component = basePath + '/StandardItem'
|
||||
}
|
||||
```
|
||||
|
||||
In the example above the script looks at the property "type" of each object, and either choses to component "#My Sheet/ListItems/HeaderItem" or "#My Sheet/ListItems/StandardItem" depending on the value.
|
||||
|
||||
## Outputs
|
||||
|
||||
| Mixed | Description |
|
||||
| -------------------- | ------------------------------------------------------------------------- |
|
||||
| **Template Outputs** | An output is created for every signal output of the _Template_ component. |
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Item Id</span> | <##output:itemActionItemId##>This output will be updated every time a signal is sent on any of the component output signals to reflect the **Id** of the related [Object](/nodes/data/object/object-node) or [Record](/nodes/data/cloud-data/record/) that triggered the signal.<##output##> |
|
||||
| <span className="ndl-data">Item Outputs</span> | This group contains component outputs other than signals for the component template of the **Repeater** node. When a signal is triggered by one of the component instances the outputs will be replayed along with the _Item Id_ of the corresponding item. This can be used to store component specific outputs in e.g. objects and variables. |
|
||||
|
||||
<span className="hidden-props-for-editor"><##output:itemOutput-\*##>An output value coming from the list item.<##output##></span>
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Item Signals</span> | This group contains component output signals from the component template of the **Repeater** node. When any of the component instances triggers an output signal, these will be relayed by the **Repeater** node along with the corresponding **Item Id**. |
|
||||
|
||||
<span className="hidden-props-for-editor"><##output:itemOutputSignal-\*##>An output signal coming from the list item.<##output##></span>
|
||||
89
nodes/ui-controls/slider.md
Normal file
89
nodes/ui-controls/slider.md
Normal file
@@ -0,0 +1,89 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Slider
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Slider
|
||||
|
||||
This node places a range slider in the visual tree. It is used to select a <span className="ndl-data">number</span> between a `min` and a `max` value.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The <span className="ndl-node">Slider</span> node allows you to set a <span className="ndl-data">Step</span> value. This controls in what intervals the slider can be incremented or decremented.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Value</span> | Sets the numeric value of the control. |
|
||||
| <span className="ndl-data">Min</span> | Sets the numeric minumum value that can be selected using this range control. Default is 0. |
|
||||
| <span className="ndl-data">Max</span> | Sets the numeric maximum value that can be selected using this range control. Default is 100. |
|
||||
| <span className="ndl-data">Step</span> | Sets the numeric step value for this range control. Values can only be selected in the specified steps. Default is 1. |
|
||||
|
||||
It can be enabled and disabled using the <span className="ndl-data">Enabled</span> input:
|
||||
|
||||
@include "../shared-props/inputs/_enabled.md"
|
||||
|
||||
### Thumb and track
|
||||
|
||||
The Property Panel features editing popouts for the Slider Thumb and Track. These are styled separately using modified versions of the [Dimensions](/nodes/shared-props/inputs/visual-input-properties/#dimensions), [Border Style](/nodes/shared-props/inputs/visual-input-properties/#border-style), [Corner Radius](/nodes/shared-props/inputs/visual-input-properties/#corner-radius) and [Box Shadow](/nodes/shared-props/inputs/visual-input-properties/#box-shadow) gadgets.
|
||||
|
||||
### 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)
|
||||
- [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)
|
||||
- [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
|
||||
|
||||
| Data | Description |
|
||||
| ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Value</span> | The current selected numeric value of the range control. |
|
||||
| <span className="ndl-data">Value Percent</span> | The current selected numeric value of the range control adjusted to be between `0` and `100`, so the value of the range control in `%`. |
|
||||
|
||||
@include "../shared-props/outputs/_control-events.md"
|
||||
|
||||
### States
|
||||
|
||||
The Slider
|
||||
|
||||
@include "../shared-props/outputs/_control-states.md"
|
||||
|
||||
### 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)
|
||||
- [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>
|
||||
106
nodes/ui-controls/text-input.md
Normal file
106
nodes/ui-controls/text-input.md
Normal file
@@ -0,0 +1,106 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Text Input
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Text Input
|
||||
|
||||
This node places a text input field in the visual tree. The input can be used to capture information from a user.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The captured value can easily be connected to other nodes in a project.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
| Data | Description |
|
||||
| ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Text</span> | The text string of the Text Input node. Setting this will change the current text, unless _Set_ is connected, then it will be updated when _Set_ receives a signal. |
|
||||
| <span className="ndl-data">Type</span> | The type of the Text Input.<br/><br/>`Text`: A single line text input (default).<br/>`Text Area`: A multi line text input.<br/>`Email`: A single line email text input.<br/>`Number`: A single line number input.<br/>`Password`: A single line password input, will mask password by default. |
|
||||
| <span className="ndl-data">Placeholder</span> | The placeholder text for when the Text Input is empty. |
|
||||
| <span className="ndl-data">Placeholder Opacity</span> | The opacity of the placeholder text. `0` is completely transparent and invisible. `1` is completely solid and opaque. |
|
||||
| <span className="ndl-data">Text Alignment</span> | The alignment of the text string within the Text Input node's bounding box. |
|
||||
|
||||
| Signal | Description |
|
||||
| ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Set</span> | Sets the text field value to the text in the _Text_ input. |
|
||||
| <span className="ndl-signal">Clear</span> | Clears the text. |
|
||||
| <span className="ndl-signal">Focus</span> | Focuses the text field.<br/><br/>_Note_: Some browsers, most notably Safari, only allow focus if it originates from a user event, like a click. So using a Delay node or other method might not work. |
|
||||
| <span className="ndl-signal">Blur</span> | Removes the keyboard focus. |
|
||||
|
||||
</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)
|
||||
- [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, Position](/nodes/shared-props/inputs/visual-input-properties/#-position)
|
||||
- [Text Style](/nodes/shared-props/inputs/visual-input-properties/#text-style)
|
||||
- [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)
|
||||
- [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">
|
||||
|
||||
| Data | Description |
|
||||
| -------------------------------------- | ------------------------ |
|
||||
| <span className="ndl-data">Text</span> | The current text string. |
|
||||
|
||||
| Signal | Description |
|
||||
| -------------------------------------------- | -------------------------------------------------- |
|
||||
| <span className="ndl-signal">On Enter</span> | Signal triggered when Enter/Return key is pressed. |
|
||||
|
||||
</div>
|
||||
|
||||
It also features the standard set of UI control <span className="ndl-signal">signals</span>:
|
||||
|
||||
@include "../shared-props/outputs/\_control-events.md"
|
||||
|
||||
### States
|
||||
|
||||
Apart from triggering <span className="ndl-signal">signals</span> the Checkbox node also notifies of its state through <span className="ndl-data">data</span> outputs:
|
||||
|
||||
@include "../shared-props/outputs/\_control-states.md"
|
||||
|
||||
### 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)
|
||||
- [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>
|
||||
Reference in New Issue
Block a user