noodl-docs/nodes/component-stack/push-component/README.md

hide_title, hide_table_of_contents, title

hide_title	hide_table_of_contents	title
true	true	Push Component node

{/##head##/}

Push Component To Stack

The Push Component To Stack node is used together with a Component Stack 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 documentation.

{/##head##/}

Inputs

Data	Description
Stack	{/##input:stack##/}This property defines which Component Stack that the push will act on. The Component Stack is referred to by its name. {/##input##/}
Mode	{/##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##/}
Target Page	{/##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
Navigate	{/##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.

{/##input:pm-*##/}A parameter input originating from a Component Input in the Target component. It's value will be forwarded to the component.{/##input##/}

Transition

Data	Description
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.
Direction	{/##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##/}
Shift Distance	{/##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##/}
Zoom	{/##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##/}
Crossfade	{/##input:tr-crossfade##/}If enabled the target will fade in and the current top fade out. Only available for Push transitions.{/##input##/}
Dark Overlay	{/##input:tr-darkoverlay##/}Adds a overlay to the current top with the color #000000. Only available for Push transitions.{/##input##/}
Dark Overlay Amount	{/##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##/}
Fade In	{/##input:tr-fadein##/}Available for Popup transitions. This indicates if the new top component should fade in ou not during the transition.{/##input##/}
Timing	{/##input:tr-timing##/}This is a timing curve that controls the delay, duration and animation ease of the transition.{/##input##/}

{/##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##/}

Outputs

Signal	Description
Navigated	{/##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 with Back Actions and Results they will appear as outputs on the related Push Component.

{/##output:backAction-*##/}An output signal originating from the Back Actions of the Pop Component Stack node of the Target Component.{/##output##/}

{/##output:backResult-*##/}A result output originating from the Result of the Pop Component Stack node of the Target Component.{/##output##/}