CODEWITHSUNDEEP
htmliosnativescriptangular2-nativescriptnstabview
MSOUFAN
MSOUFAN

Reputation: 101

Can I have the iOS Tab View on top in Native Script?

I am creating a native script application and I want my tab View to appear on the top for iOS. I know sticking the tabView on the top violates the human interface guideline, but I need to do it this way.

Upvotes: 1

Views: 1389

Answers (3)

Felipe Centeno
Felipe Centeno

Reputation: 3749

With the new Nativescript 6 there is a new component called "Tabs" that allows you to do this:

Here is how you would do it with Nativescript angular:

<Tabs selectedIndex="1" class="fas font-size">
    <!-- Using icon fonts for each TabStripItem -->
    <TabStrip>
        <TabStripItem title="Home"></TabStripItem>
        <TabStripItem title="Account"></TabStripItem>
        <TabStripItem title="Search"></TabStripItem>
    </TabStrip>

    <TabContentItem>
        <GridLayout>
            <Label text="Home Page" class="h2 text-center"></Label>
        </GridLayout>
    </TabContentItem>
    <TabContentItem>
        <GridLayout>
            <Label text="Account Page" class="h2 text-center"></Label>
        </GridLayout>
    </TabContentItem>
    <TabContentItem>
        <GridLayout>
            <Label text="Search Page" class="h2 text-center"></Label>
        </GridLayout>
    </TabContentItem>

</Tabs>

Here is a playground project I created.

Hereis a playground example with Nativescript typescript using both top and low tabs

Here you can find the documentation

important note: this widget is currently on beta

Upvotes: 1

Alexej Gerstmaier
Alexej Gerstmaier

Reputation: 1

You can implement all manners of TabView behaviours/layouts using the SegmentedBar. See this answer for details

Upvotes: 0

Dlucidone
Dlucidone

Reputation: 1101

You can achieve that. Here's how i have done the similar thing -

<StackLayout row="0" col="0">
<StackLayout  *ngIf="visibility1" id="mainView" visibility="{{ visibility1 ? 'visible' : 'collapsed' }}">
    <FirstView></FirstView>
</StackLayout>
<StackLayout  *ngIf="visibility2" id="mainView" visibility="{{ visibility2 ? 'visible' : 'collapsed' }}">
    <SecondView></SecondView>
</StackLayout>
<StackLayout  *ngIf="visibility3" id="mainView" visibility="{{ visibility3 ? 'visible' : 'collapsed' }}">
    <ThirdView></ThirdView>
</StackLayout>
</StackLayout>

and change the visibility of each component based on the click events.

Upvotes: 0

Related Questions