Selecting Tabs

How-to Discussions
1

Hi,
in this example https://www.fusetools.com/examples/tabs-layoutmaster i noticed that when i go from TAB 1 to TAB 3, TAB 2 is active for a second. I would like to go from TAB 1 to TAB 3 without activating TAB 2.

Here an example of how the tabs-layoutmaster example works:

Here an example of how i would like it to work:

Do you have any suggestion?
Thank you

2

Hey Denise,

This example uses PageControl for routing pages. The pages of a PageControl are ordered front to back, with the first child being in the front. Going forward means going towards the first child and going backwards means going towards the last child.

In your case, I would suggest using Navigator. Here is a pretty nice example from the documentation how to use Navigator and navigate between pages.

Hope this helps.

3

Thank you so much @Arturs, but I already have a navigator in MainView.ux and the example you showed me doesn’t work. How can i make it work?

My MainView.Ux

<App>
    <Router ux:Name="router"/>
    <DockPanel>
        <Android.StatusBarConfig Color="#0003" IsVisible="True" />
        <StatusBarBackground Dock="Top"/>
        <Navigator DefaultPath="firstPage">
            <FirsTPage ux:Template="firstPage" router="router"/>
            <SecondPage ux:Template="secondPage" router="router"/>
            <ThirdPage ux:Template="thirdPage" router="router"/>
        </Navigator>
        <BottomBarBackground Dock="Bottom"/>
    </DockPanel>
</App>

Page Example

<Page ux:Class="FirstPage">
	<Router ux:Dependency="router" />
</Page>
4

Hi Denise,

“doesn’t work” is not a good problem description. The docs example works just fine for me, and if it doesn’t for any reason work for you more details would be nice.

As for you question, what Arturs suggested is spot on. You need to use a Navigator. However, Navigator alone won’t do the trick, you’ll also need to have custom Transitions on your pages.

Here’s something to get you started:

<App>
    <Android.StatusBarConfig Color="#0003" IsVisible="True" />
    <Router ux:Name="router"/>

    <JavaScript>
        module.exports = {
            gotoFirst: function() {
                router.goto("firstPage", {});
            },
            gotoSecond: function() {
                router.goto("secondPage", {});
            },
            gotoThird: function() {
                router.goto("thirdPage", {});
            }
        };
    </JavaScript>

    <DockPanel>
        <StatusBarBackground Dock="Top"/>
        <BottomBarBackground Dock="Bottom"/>
        <Grid Height="56" Dock="Top" Background="#14a" ColumnCount="3">
            <Panel HitTestMode="LocalBounds" Clicked="{gotoFirst}">
                <Text Value="One" Color="#fff" Alignment="Center" />
            </Panel>
            <Panel HitTestMode="LocalBounds" Clicked="{gotoSecond}">
                <Text Value="Two" Color="#fff" Alignment="Center" />
            </Panel>
            <Panel HitTestMode="LocalBounds" Clicked="{gotoThird}">
                <Text Value="Three" Color="#fff" Alignment="Center" />
            </Panel>
        </Grid>

        <Navigator DefaultPath="firstPage" Transition="None">
            <CustomTransitionPage ux:Template="firstPage" router="router" Background="#18f" />
            <CustomTransitionPage ux:Template="secondPage" router="router" Background="#f81" />
            <CustomTransitionPage ux:Template="thirdPage" router="router" Background="#8f1" />
        </Navigator>

    </DockPanel>

    <Panel ux:Class="CustomTransitionPage" Opacity="1">
        <Router ux:Dependency="router" />
        <Transition Direction="ToActive">
            <Change this.Opacity="0" Duration="0.16" />
        </Transition>
    </Panel>

</App>
5

Thank you, I used your example and https://www.fusetools.com/docs/navigation/navigation#relative-navigation. As I said I already had a Navigator in MainView.ux and I needed to make this tabs independent of the main navigation.

Solution:

MainView.ux

<App>
	<Router ux:Name="router"/>
	<DockPanel>

		<Navigator DefaultPath="tab">
			<HomePage ux:Template="home" router="router"/>
			<TabPage ux:Template="tab" router="router"/>
		</Navigator>

	</DockPanel>
</App>

HomePage.ux:

<Page ux:Class="HomePage">
	<Router ux:Dependency="router"/>
	<DockPanel>
		<Text Value="This is the homepage" />
	</DockPanel>
</Page>

TabPage.ux:

<Page ux:Class="TabPage">
	<Router ux:Dependency="router"/>

	<JavaScript>
	module.exports.toSub1 = function() {
		router.pushRelative(secondNav, "firstPage");
	}
	module.exports.toSub2 = function() {
		router.pushRelative(secondNav, "secondPage");
	}
	module.exports.toSub3 = function() {
		router.pushRelative(secondNav, "thirdPage");
	}

	module.exports.gotoHome = function() {
		router.push("homePage");
	}
	</JavaScript>


	<DockPanel>
		<StatusBarBackground Dock="Top"/>
		<BottomBarBackground Dock="Bottom"/>

		<Grid Height="56" Dock="Top" Background="#14a" ColumnCount="3">
			<Panel HitTestMode="LocalBounds" Clicked="{toSub1}">
				<Text Value="One" Color="#fff" Alignment="Center" />
			</Panel>
			<Panel HitTestMode="LocalBounds" Clicked="{toSub2}">
				<Text Value="Two" Color="#fff" Alignment="Center" />
			</Panel>
			<Panel HitTestMode="LocalBounds" Clicked="{toSub3}">
				<Text Value="Three" Color="#fff" Alignment="Center" />
			</Panel>
		</Grid>

		<Navigator ux:Name="secondNav" DefaultPath="firstPage" Transition="None">
			<CustomTransitionPage ux:Template="firstPage" router="router" Background="#18f" />
			<CustomTransitionPage ux:Template="secondPage" router="router" Background="#f81" />
			<CustomTransitionPage ux:Template="thirdPage" router="router" Background="#8f1" />
		</Navigator>

	</DockPanel>

	<Panel ux:Class="CustomTransitionPage" Opacity="1">
		<Router ux:Dependency="router" />
		<Transition Direction="ToActive">
			<Change this.Opacity="0" Duration="0.16" />
		</Transition>

		<Rectangle Color="White" Height="100" Width="100" Clicked="{gotoHome}" />
	</Panel>

</Page>