# Split Tabs example on to different pages

**URL:** <https://forums.fusetools.com/t/split-tabs-example-on-to-different-pages/4346>\
**Category:** How-to Discussions\
**Created:** [July 7, 2017, 12:13pm UTC](https://forums.fusetools.com/t/split-tabs-example-on-to-different-pages/4346 "2017-07-07T12:13:54Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![petr.arkhipov](https://avatars.discourse-cdn.com/v4/letter/p/8edcca/32.png) [@petr.arkhipov](https://forums.fusetools.com/u/petr.arkhipov)\
**Post date:** [July 7, 2017, 12:13pm UTC](https://forums.fusetools.com/t/split-tabs-example-on-to-different-pages/4346/1 "2017-07-07T12:13:54Z")

</div>

Hello!  
Could you please help and give an example (or basic approach) how to modify this example ([https://www.fusetools.com/examples/tabs-layoutmaster](https://www.fusetools.com/examples/tabs-layoutmaster)) to have each page in separate files (ux and js)

Thank you very much

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [July 7, 2017, 4:14pm UTC](https://forums.fusetools.com/t/split-tabs-example-on-to-different-pages/4346/2 "2017-07-07T16:14:04Z")

</div>

Hi Petr,

here’s one way to do it:

```auto
<App Background="#eee">

    <Panel ux:Class="Tab" ClipToBounds="false" Margin="0,0,0,4" Background="#bdc3c7">
        <string ux:Property="Text" />
        <Text Value="{ReadProperty Text}" Color="#FFF" Alignment="Center" />
    </Panel>

    <Rectangle ux:Name="indicator" LayoutMaster="page1Tab" Alignment="Bottom" Height="4" Color="#6c7a89">
        <LayoutAnimation>
            <Move RelativeTo="WorldPositionChange" X="1" Duration="0.4" Easing="BackIn"/>
        </LayoutAnimation>
    </Rectangle>

    <Text ux:Class="WelcomeText" FontSize="30" Alignment="Center"/>

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

        <Grid Dock="Top" ColumnCount="3" Height="50" Background="#bdc3c7">
            <Panel ux:Name="page1Tab">
                <Tab Text="Page 1">
                    <Clicked>
                        <Set navigation.Active="page1" />
                    </Clicked>
                </Tab>
            </Panel>
            <Panel ux:Name="page2Tab">
                <Tab Text="Page 2">
                    <Clicked>
                        <Set navigation.Active="page2" />
                    </Clicked>
                </Tab>
            </Panel>
            <Panel ux:Name="page3Tab">
                <Tab Text="Page 3">
                    <Clicked>
                        <Set navigation.Active="page3" />
                    </Clicked>
                </Tab>
            </Panel>
        </Grid>

        <PageControl ux:Name="navigation">
            <PageOne ux:Name="page1" Background="#eee" theIndicator="indicator" indicatorTarget="page1Tab" />
            <PageTwo ux:Name="page2" Background="#abb7b7" theIndicator="indicator" indicatorTarget="page2Tab" />
            <PageThree ux:Name="page3" Background="#f2f1ef" theIndicator="indicator" indicatorTarget="page3Tab" />
        </PageControl>

    </DockPanel>

    <!-- put these three in three separate UX files: -->
    <Page ux:Class="PageOne">
        <Rectangle ux:Dependency="theIndicator" />
        <Panel ux:Dependency="indicatorTarget" />
        <WhileActive Threshold="0.5">
            <Set theIndicator.LayoutMaster="indicatorTarget" />
        </WhileActive>
        <WelcomeText>Welcome to Page 1</WelcomeText>
    </Page>

    <Page ux:Class="PageTwo">
        <Rectangle ux:Dependency="theIndicator" />
        <Panel ux:Dependency="indicatorTarget" />
        <WhileActive Threshold="0.5">
            <Set theIndicator.LayoutMaster="indicatorTarget" />
        </WhileActive>
        <WelcomeText>Welcome to Page 2</WelcomeText>
    </Page>

    <Page ux:Class="PageThree">
        <Rectangle ux:Dependency="theIndicator" />
        <Panel ux:Dependency="indicatorTarget" />
        <WhileActive Threshold="0.5">
            <Set theIndicator.LayoutMaster="indicatorTarget" />
        </WhileActive>
        <WelcomeText>Welcome to Page 3</WelcomeText>
    </Page>

</App>

```

The trick there is to use [Dependencies](https://www.fusetools.com/docs/ux-markup/dependencies), so that your indicator still knows where to go.

So when this is working, you can safely put any one or all of the `ux:Class`es in separate `.ux` files. Adding a `JavaScript` to any given page is pretty straightforward, too:

```auto
<Page ux:Class="PageOne">
    <Rectangle ux:Dependency="theIndicator" />
    <Panel ux:Dependency="indicatorTarget" />
    <!-- make sure the PageOne.js file resides right next to this UX file -->
    <JavaScript File="PageOne.js" />
    <WhileActive Threshold="0.5">
        <Set theIndicator.LayoutMaster="indicatorTarget" />
    </WhileActive>
    <WelcomeText>Welcome to Page 1</WelcomeText>
</Page>

```

Hope this helps!

---

<div class="post-metadata">

**Author:** ![petr.arkhipov](https://avatars.discourse-cdn.com/v4/letter/p/8edcca/32.png) [@petr.arkhipov](https://forums.fusetools.com/u/petr.arkhipov)\
**Post date:** [July 8, 2017, 12:09pm UTC](https://forums.fusetools.com/t/split-tabs-example-on-to-different-pages/4346/3 "2017-07-08T12:09:23Z")

</div>

Thank you very much, Uldis!  
It works!