mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-11 23:02:54 +01:00
chore: Upgrade Docusaurus from v2 to v3 (#52)
* chore: Upgrade Docusaurus from v2 to v3 * chore: Update "Test build" GH workflow * fix: build All markdown is processed as MDX * fix: Broken links
This commit is contained in:
Eric Tuvesson
GitHub
@@ -4,7 +4,7 @@ hide_table_of_contents: true
|
||||
title: Component Stack node
|
||||
---
|
||||
|
||||
<##head##>
|
||||
{/*##head##*/}
|
||||
|
||||
# Component Stack
|
||||
|
||||
@@ -32,25 +32,25 @@ With the **clip** property set to <span className="ndl-data">false</span>, the *
|
||||
|
||||
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/README.md) node.
|
||||
|
||||
<##head##>
|
||||
{/*##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">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##> |
|
||||
| <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##> |
|
||||
| <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##> |
|
||||
| <span className="ndl-deprecated">Use Routes</span> | {/*##input:useRoutes##*/}**This Property is deprecated and should not be used.**{/*##input##*/} |
|
||||
|
||||
### Visual
|
||||
|
||||
@@ -62,8 +62,8 @@ This node supports the following [Visual Input Properties](/nodes/shared-props/i
|
||||
|
||||
| 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##> |
|
||||
| <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
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ hide_table_of_contents: true
|
||||
title: Pop Component node
|
||||
---
|
||||
|
||||
<##head##>
|
||||
{/*##head##*/}
|
||||
|
||||
# Pop Component Stack
|
||||
|
||||
@@ -16,15 +16,15 @@ The **Pop Component Stack** node is used together with a [Component Stack](/node
|
||||
|
||||
</div>
|
||||
|
||||
?> Note that you have to use the **Pop Component Stack** node from within a component in the **Component Stack**.
|
||||
> Note that you have to use the **Pop Component Stack** node from within a component in the **Component Stack**.
|
||||
|
||||
<##head##>
|
||||
{/*##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##> |
|
||||
| <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
|
||||
|
||||
@@ -34,6 +34,6 @@ When popping a component from the stack you can also trigger a **Back Action** a
|
||||
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **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: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>
|
||||
<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>
|
||||
|
||||
@@ -4,7 +4,7 @@ hide_table_of_contents: true
|
||||
title: Push Component node
|
||||
---
|
||||
|
||||
<##head##>
|
||||
{/*##head##*/}
|
||||
|
||||
# Push Component To Stack
|
||||
|
||||
@@ -16,39 +16,39 @@ The **Push Component To Stack** node is used together with a [Component Stack](/
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
{/*##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##> |
|
||||
| <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##> |
|
||||
| <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>
|
||||
<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##> |
|
||||
| <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>
|
||||
@@ -56,13 +56,13 @@ The **Push Component To Stack** node is used together with a [Component Stack](/
|
||||
|
||||
<div className="hidden-props-for-editor">
|
||||
|
||||
<##input:transition##>The type of transition. Can be any of:
|
||||
{/*##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##>
|
||||
Not all of the parameters below are available for all types of transitions.{/*##input##*/}
|
||||
|
||||
</div>
|
||||
|
||||
@@ -70,12 +70,12 @@ Not all of the parameters below are available for all types of transitions.<##in
|
||||
|
||||
| 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##> |
|
||||
| <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: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>
|
||||
<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