Global components usage to avoid code duplication (Nativescript-Vue)

1
votes

My nativescript-vue app has a tabview in the bottom, a Stacklayout in the top for actionbar/header purposes with categories. I do not want to repeat the tabview and header in every page. How can I use these as global components and refresh the rest of the page in the middle if I change select different category?

Thanks!

Here is my code:

<DockLayout class="screen" stretchLastChild="true">
<ScrollView dock="top">
                <StackLayout orientation="vertical">
                    <GridLayout class="header" rows="auto" columns="*,auto,auto">
                        <Label text="Test" row="0" col="0" verticalAlignment="center"></Label>
                        <Image src="~/assets/images/search.png"
                            verticalAlignment="center" marginRight="25" row="0"
                            col="1" height="22" />
                        <Button class="logoutButton" text="Logout" fontSize="14" verticalAligment="middle" marginRight="10" row="0" col="2" @tap="logout"></Button>
                    </GridLayout>
                    <GridLayout class="tabs" columns="*,*,*,*,*" height="30" :selectedIndex="selectedIndex">
                        <Label class="active" text="Category1" row="0" col="0"></Label>
                        <Label text="Category2" row="0" col="1"></Label>
                        <Label text="Category3" row="0" col="2"></Label>
                        <Label text="Category4" row="0" col="3"></Label>
                        <Label text="Category5" row="0" col="4"></Label>
                    </GridLayout>
                </StackLayout>
            </ScrollView>
            <TabView :selectedIndex="selectedIndex">
              <TabViewItem title="Tab1" iconSource="~/images/icons/coins.png" @tap="goTo1()">
                <Label text="Tab1"/>
              </TabViewItem>
              <TabViewItem title="Tab2" iconSource="~/images/icons/settings.png" @tap="goTo2()">
                <Label text="Tab2"/>
              </TabViewItem>
              <TabViewItem title="Tab3" iconSource="~/images/icons/add_user_male.png" @tap="goTo3()">
                <Label text="Tab3"/>
              </TabViewItem>
            </TabView>
        </DockLayout>
1
nativescriptnativescript-vue

1 Answers

2
votes

You just have to adjust your frame accordingly. Use a GridLayout as root of your application, position your TabView and StackLayout inside then place the Frame inside TabViewItem, so everything else stay same while you navigate inside TabViewItem.

       <DockLayout class="screen" stretchLastChild="true">
         <ScrollView dock="top">
            <StackLayout orientation="vertical">
                <GridLayout class="header" rows="auto" columns="*,auto,auto">
                    <Label text="Test" row="0" col="0" verticalAlignment="center"></Label>
                    <Image src="~/assets/images/search.png"
                        verticalAlignment="center" marginRight="25" row="0"
                        col="1" height="22" />
                    <Button class="logoutButton" text="Logout" fontSize="14" verticalAligment="middle" marginRight="10" row="0" col="2" @tap="logout"></Button>
                </GridLayout>
                <GridLayout class="tabs" columns="*,*,*,*,*" height="30" :selectedIndex="selectedIndex">
                    <Label class="active" text="Category1" row="0" col="0"></Label>
                    <Label text="Category2" row="0" col="1"></Label>
                    <Label text="Category3" row="0" col="2"></Label>
                    <Label text="Category4" row="0" col="3"></Label>
                    <Label text="Category5" row="0" col="4"></Label>
                </GridLayout>
            </StackLayout>
        </ScrollView>
        <TabView :selectedIndex="selectedIndex">
          <TabViewItem title="Tab1" iconSource="~/images/icons/coins.png" @tap="goTo1()">
            <Frame id="frame1">
               <YourTab1Comp></YourTab1Comp>
            </Frame>
          </TabViewItem>
          <TabViewItem title="Tab2" iconSource="~/images/icons/settings.png" @tap="goTo2()">
            <Frame id="frame2">
               <YourTab2Comp></YourTab2Comp>
            </Frame>
          </TabViewItem>
          <TabViewItem title="Tab3" iconSource="~/images/icons/add_user_male.png" @tap="goTo3()">
            <Frame id="frame3">
               <YourTab3Comp></YourTab3Comp>
            </Frame>
          </TabViewItem>
        </TabView>
    </DockLayout>

When you want to navigate within particular tab, you have to mention the frame id,

this.$navigateTo(SomeComp, {
  frame: 'frame1' // <frame id, or ref, or instance>
});