RouterModify Class

Performs a transition on the router with extended options.

Note: there is also a JavaScript interface for Router.modify.

Basic use requires setting the property Bookmark to specify the route to navigate to, and the How property to specify what navigation action will be used, most frequently Push or Goto.

<Router ux:Name="router" />
...
<JavaScript>
    router.bookmark({
        name: "myBookmark",
        path: ["myPage", {}, "mySubpage", {}]
    });
</JavaScript>
...
<Panel>
    <Clicked>
        <RouterModify How="Push" Bookmark="myBookmark" />
    </Clicked>
    <Text Value="Open subpage" />
</Panel>

If we only need to go back in navigation history, the Bookmark property can be omitted:

<RouterModify How="GoBack" />

When using Navigator or PageControl, the default transitions can be overriden by setting Transition and Style properties on RouterModify. This pushes another page without a transition:

<RouterModify How="Push" Transition="Bypass" Bookmark="myBookmark" />

We can use the Style property to refer to specific Transition triggers on target pages, allowing us to trigger different transitions for separate use cases:

<Router ux:Name="router" />
...
<JavaScript>
    router.bookmark({
        name: "myBookmark",
        path: ["secondPage", {}]
    });
</JavaScript>
...
<Navigator DefaultPath="firstPage">
    <StackPanel ux:Template="firstPage">
        <Panel>
            <Clicked>
                <RouterModify How="Push" Bookmark="myBookmark" Style="fromTop" />
            </Clicked>
            <Text Value="Transition from top" />
        </Panel>
        <Panel>
            <Clicked>
                <RouterModify How="Push" Bookmark="myBookmark" Style="fromBottom" />
            </Clicked>
            <Text Value="Transition from bottom" />
        </Panel>
    </StackPanel>

    <Panel ux:Template="secondPage">
        <Transition Style="fromTop">
            <Move Y="-1" RelativeTo="ParentSize" Duration="0.4" Easing="SinusoidalInOut" />
        </Transition>
        <Transition Style="fromBottom">
            <Move Y="1" RelativeTo="ParentSize" Duration="0.4" Easing="SinusoidalInOut" />
        </Transition>
        <Clicked>
            <RouterModify How="GoBack" />
        </Clicked>
        <Text Value="Go back" />
    </Panel>
</Navigator>

Location

Namespace
Fuse.Navigation
Package
Fuse.Navigation 2.9.1
Show Uno properties and methods

Interface of RouterModify

Router : Router ux

The router to use. If this is null (default) then it looks through the ancestor nodes to find the nearest router.

Inherited from TriggerAction

AtProgress : float ux

A value between 0 and 1 for when the action should be performed. Alternative to Delay.

Delay : float ux

The number of seconds after the start of the trigger that the action should be performed.

TargetNode : Node ux

The node that the action targets. If not specified then the enclsoing Trigger will be used. Several triggers can look for a target starting from this point. Some triggers require a Target to be specified.

Unroot uno

Called when the owner of this object is unrooted. This gives an action to cleanup resources or cancel pending actions.

Inherited from PropertyObject

Inherited from object

Implemented Interfaces