mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-12 07:12:53 +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
82
nodes/component-stack/component-stack-node.md
Normal file
82
nodes/component-stack/component-stack-node.md
Normal file
@@ -0,0 +1,82 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Component Stack
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Component Stack
|
||||
|
||||
The **Component Stack** node is used to navigate between components in an area on the screen. It is typically used together with the navigation nodes [Push Component To Stack](/nodes/component-stack/push-component) and [Pop Component Stack](/nodes/component-stack/pop-component).
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Unlike the somewhat similar [Page Router](/nodes/navigation/page-router) the **Component Stack** is optimized for app type navigation (in contrast to web type) and does not use URLs and routing as part of the navigation.
|
||||
|
||||
The **Component Stack** works as a regular stack, meaning you can _Push_ (put a component at the top of the stack) and _Pop_ (remove the topmost component from the stack). You can also chose to _replace_ all components with the a new component (see [Push Component To Stack](/nodes/component-stack/push-component).
|
||||
|
||||
When pushing the **Component Stack** will create a new instance of the component. Only the top component will be shown. This means that you can have multiple instances of the same component on the stack at the same time. You can use the **Reset** action to clear the stack.
|
||||
|
||||
## Adding Component Entries to Push and Pop
|
||||
|
||||
A Component Stack should have a number of _component entries_ that it can push or pop. You add components entries by clicking on _Add Component_ button, giving the entry a name and select a component. These entries will then be available in the [Push Component To Stack](/nodes/component-stack/push-component) and [Pop Component Stack](/nodes/component-stack/pop-component) nodes.
|
||||
|
||||
## Visual Layout
|
||||
|
||||
With the **clip** property set to <span className="ndl-data">false</span>, the **Component Stack** will automatically take up as much space as available and expand beyond that if its component currently showing is larger. If the **clip** property is set to <span className="ndl-data">true</span> it fill up any available space in its parent container and clip its components if they are larger than that.
|
||||
|
||||
If you want to control the size of the **Component Stack** beyond that, you should put it as a child in a [Group](/nodes/basic-elements/group) node.
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| -------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Name</span> | <##input:name##>This is the name of the **Component Stack**. If you have multiple **Component Stacks** in your project you use the name to identify it in the [Push Component To Stack](/nodes/component-stack/push-component) and [Pop Component Stack](/nodes/component-stack/pop-component) nodes. <##input##> |
|
||||
| <span className="ndl-data">Start Page</span> | The Component which will be shown by **Component Stack** at the start. |
|
||||
| <span className="ndl-data">Clip Content</span> | <##input:clip##>If this property is set to `true` the **Component Stack** will clip any component that is extending beyond its size. If set to `false` the size of the **Component Stack** will grow if needed to fit its component.<##input##> |
|
||||
| <span className="ndl-data">Background Color</span> | <##input:backgroundColor##>The color that will be shown when there is no component covering the **Component Stack** or when the component is transparent.<##input##> |
|
||||
| <span className="ndl-data">Mounted</span> | <##input:mounted##>This property is used to completely remove the node from the DOM. If this property is set to false the node is removed from the DOM. It differs from the _Visible_ property where the node is still part of the DOM but invisible.<##input##> |
|
||||
|
||||
| Signal | Description |
|
||||
| ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Reset</span> | <##input:reset##>Triggering this action resets the **Component Stack** meaning all components on the stack will be removed and only the **Start Page** will be on the stack.<##input##> |
|
||||
|
||||
| Deprecated | Description |
|
||||
| -------------------------------------------------- | --------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-deprecated">Use Routes</span> | <##input:useRoutes##>**This Property is deprecated and should not be used.**<##input##> |
|
||||
|
||||
### Visual
|
||||
|
||||
This node supports the following [Visual Input Properties](/nodes/shared-props/inputs/visual-input-properties):
|
||||
|
||||
- [Advanced HTML](/nodes/shared-props/inputs/visual-input-properties#advanced-html)
|
||||
|
||||
## Outputs
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Top Component Name</span> | <##output:topPageName##>This property holds the name of the current component that is on the top of the stack.<##output##> |
|
||||
| <span className="ndl-data">Stack Depth</span> | <##output:stackDepth##>This property equals to the number of components that are currently on the **Component Stack**.<##output##> |
|
||||
|
||||
### 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>
|
||||
39
nodes/component-stack/pop-component.md
Normal file
39
nodes/component-stack/pop-component.md
Normal file
@@ -0,0 +1,39 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Pop Component
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Pop Component Stack
|
||||
|
||||
The **Pop Component Stack** node is used together with a [Component Stack](/nodes/component-stack/component-stack-node) to navigate back ("pop"). It is typically used when creating app style navigation. For more information on how **Component Stack** navigation work, check out the [Component Stack](/nodes/component-stack/component-stack-node) documentation.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
?> Note that you have to use the **Pop Component Stack** node from within a component in the **Component Stack**.
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Signal | Description |
|
||||
| -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Navigate</span> | <##input:navigate##>Triggering this action will pop the topmost component from the stack. If there is a component under the popped component, it will be now be visible.<##input##> |
|
||||
|
||||
### Back Actions and Results
|
||||
|
||||
When popping a component from the stack you can also trigger a **Back Action** and a **Result**. This can be used to communicate back to the place where the component was originally pushed using the [Push To Component Stack](/nodes/component-stack/push-component) node. This could for example be used to communicate back some contents of a form, and if the user pressed "OK" or "Cancel".
|
||||
|
||||
| Mixed | Description |
|
||||
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **Back Actions, Results** | You can add any number of **Back Actions** and **Result** inputs to the **Pop Component Stack** node. These will show up as outputs on any [Push To Component Stack](/nodes/component-stack/push-component) node pointing to the component with this **Pop Component Stack** node. |
|
||||
|
||||
<span className="hidden-props-for-editor"><##input:backAction-\*##>A **Back Action** signal. Triggering this will pop from the **Component Stack** and send a signal to the [Push To Component Stack](/nodes/component-stack/push-component) node used to push the component.<##input##></span>
|
||||
|
||||
<span className="hidden-props-for-editor"><##input:result-\*##>A **Result** input. Any data sent to this input will be forwarded to the [Push To Component Stack](/nodes/component-stack/push-component) node when the component is popped.<##input##></span>
|
||||
81
nodes/component-stack/push-component.md
Normal file
81
nodes/component-stack/push-component.md
Normal file
@@ -0,0 +1,81 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Push Component
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Push Component To Stack
|
||||
|
||||
The **Push Component To Stack** node is used together with a [Component Stack](/nodes/component-stack/component-stack-node) to navigate to a new component (i.e. "push on the stack"). It is typically used when creating app style navigation. For more information on how **Component Stack** navigation work, check out the [Component Stack](/nodes/component-stack/component-stack-node) documentation.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Stack</span> | <##input:stack##>This property defines which **Component Stack** that the push will act on. The **Component Stack** is referred to by its name. <##input##> |
|
||||
| <span className="ndl-data">Mode</span> | <##input:mode##>This property selects whether the previous components will be kept in the stack, beneath the new top component, (**Push**) or if all components will be replaced by the new top component (**Replace**), in which case the new component will be the only one on the stack.<##input##> |
|
||||
| <span className="ndl-data">Target Page</span> | <##input:target##>Here you select the target component to push on the **Component Stack**. The component need to be one of the component entries defined in the **Component Stack** to show up as an option here.<##input##> |
|
||||
|
||||
| Signal | Description |
|
||||
| -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Navigate</span> | <##input:navigate##>Sending a signal to this input will push the **Target Page** on the **Component Stack**.<##input##> |
|
||||
|
||||
| Mixed | Description |
|
||||
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **Component Inputs** | Any **Component Inputs** that the target component have will be available as inputs on the **Push Component To Stack** node. |
|
||||
|
||||
<span className="hidden-props-for-editor"><##input:pm-\*##>A parameter input originating from a **Component Input** in the **Target** component. It's value will be forwarded to the component.<##input##></span>
|
||||
|
||||
### Transition
|
||||
|
||||
| Data | Description |
|
||||
| ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Transition</span> | The type of transition. Can be any of:<br/><br/>`None`: No transition, the target component is immediately made visible.<br/>`Push`: The current top of the stack is "pushed away" while the new top enters.<br/>`Popup`: The current top is not changed. The new top enters with a transition on top of it.<br/><br/>Not all of the parameters below are available for all types of transitions. |
|
||||
| <span className="ndl-data">Direction</span> | <##input:tr-direction##>This is the direction the new top component enters from, and also the direction the current top is pushed away in, if the transition is _Push_. It can be any of _Left_, _Right_, _Up_, _Down_ and _In_,_Out_. The latter zooms in vs out.<##input##> |
|
||||
| <span className="ndl-data">Shift Distance</span> | <##input:tr-shift##>This is the distance of the transition in either _%_ or in _px_, i.e. the distance the component is moved in the specified direction.<##input##> |
|
||||
| <span className="ndl-data">Zoom</span> | <##input:tr-zoom##>This is available if the _Direction_ is set to _In_ or _Out_ and specifies the amount of zoom the transition should apply.<##input##> |
|
||||
| <span className="ndl-data">Crossfade</span> | <##input:tr-crossfade##>If enabled the target will fade in and the current top fade out. Only available for _Push_ transitions.<##input##> |
|
||||
| <span className="ndl-data">Dark Overlay</span> | <##input:tr-darkoverlay##>Adds a overlay to the current top with the color #000000. Only available for _Push_ transitions.<##input##> |
|
||||
| <span className="ndl-data">Dark Overlay Amount</span> | <##input:tr-darkoverlayamount##>The maximum opacity of the overlay. It starts at `0` and animates to this value. `0` disables it, and `1` makes the overlay animate to 100% opacity. Only available for _Push_ transitions.<##input##> |
|
||||
| <span className="ndl-data">Fade In</span> | <##input:tr-fadein##>Available for _Popup_ transitions. This indicates if the new top component should fade in ou not during the transition.<##input##> |
|
||||
| <span className="ndl-data">Timing</span> | <##input:tr-timing##>This is a timing curve that controls the delay, duration and animation ease of the transition.<##input##> |
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
<img src="/guides/navigation/transition-params.png"></img>
|
||||
</div>
|
||||
|
||||
<div className="hidden-props-for-editor">
|
||||
|
||||
<##input:transition##>The type of transition. Can be any of:
|
||||
|
||||
- _None_ No transition, the target component is immediately made visible.
|
||||
- _Push_ The current top of the stack is "pushed away" while the new top enters.
|
||||
- _Popup_ The current top is not changed. The new top enters with a transition on top of it.
|
||||
|
||||
Not all of the parameters below are available for all types of transitions.<##input##>
|
||||
|
||||
</div>
|
||||
|
||||
## Outputs
|
||||
|
||||
| Signal | Description |
|
||||
| --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-signal">Navigated</span> | <##output:navigated##>This signal is triggered when the **Target Component** has been pushed on the **Component Stack**.<##output##> |
|
||||
|
||||
| Mixed | Description |
|
||||
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **Back Actions, Results** | If the **Target Component** contains a [Pop Component Stack](/nodes/component-stack/pop-component) with **Back Actions** and **Results** they will appear as outputs on the related **Push Component**. |
|
||||
|
||||
<span className="hidden-props-for-editor"><##output:backAction-\*##>An output signal originating from the **Back Actions** of the [Pop Component Stack](/nodes/component-stack/pop-component) node of the **Target Component**.<##output##></span>
|
||||
|
||||
<span className="hidden-props-for-editor"><##output:backResult-\*##>A result output originating from the **Result** of the [Pop Component Stack](/nodes/component-stack/pop-component) node of the **Target Component**.<##output##></span>
|
||||
Reference in New Issue
Block a user