Buttons Navigation


#1

I am trying to build a custom tab view using buttons. So clicking on each button will display different output on the rest of the page. So something like that:

I would really appreciate any kind of help.


#2

Did the standard TabView not meet your needs?


#3

It did for Android, but I could not stick the TabView on the top for iOS(Just like the design you see). So I decided to make my own custom one.


#4

looks like this forum topic is a duplicate of one you started earlier: iOS tabView on the top

Did that solution not work for you? Note, on iOS the design pattern is to have tabs at the bottom.


#5

Oh ya, I know that the iOS user interface guidelines emphasize on having the Tabs at the bottom.
The solution that was provided in my previous question was the opposite way. I tried to revert that, but it did not work out.


#6

Hey @MajdSoufan, My idea is try with Ng Directives with scope variables.

component.html

<FlexboxLayout columns="*,*,*" rows="*">
    <Button row="0" col="0" class="btn btn-primary btn-active" text="Sitechecker" (tap)="onSitechecker()"></Button>
    <Button row="0" col="1" class="btn btn-primary btn-active" text="Features" (tap)="onFeatures()"></Button>
    <Button row="0" col="2" class="btn btn-primary btn-active" text="Releasenotes" (tap)="onReleasenotes()"></Button>
</FlexboxLayout>

<GridLayout [ngSwitch]="category" class="p-15 m-t-15">
<GridLayout>
    <GridLayout *ngSwitchCase="'sitechecker'" backgroundColor="#8C489F">
</GridLayout>
    <GridLayout *ngSwitchCase="'features'" backgroundColor="#0077AF">
</GridLayout>
    <GridLayout *ngSwitchCase="'releasenotes'" backgroundColor="#FFFF66">
</GridLayout>
</GridLayout>
</GridLayout>

component.ts

import { Component } from "@angular/core";

@Component({
    moduleId: module.id,
    templateUrl: "./ngswitch-directive.component.html",
})
export class NgSwitchComponent {
    public category: string;

    onSitechecker() {
        this.category= "sitechecker";
    }

    onFeatures() {
        this.category= "features";
    }

    onReleasenotes() {
        this.category= "releasenotes";
    }
}