app-bar.page.html

<app-header title="App Bar"></app-header>

<ion-content>
  <ion-grid class="page-content" fixed>
    <ion-row>
      <ion-col size="12">
        <app-example [title]="'App Bar'" [subtitle]="''" html="assets/docs/snippets/app-bar/html.md" typescript="assets/docs/snippets/app-bar/typescript.md"
          css="assets/docs/snippets/app-bar/css.md">
          <div class="container">
            <ion-item>
              <ion-label>Title Layout</ion-label>
              <ion-select [(ngModel)]="titleLayout" [interfaceOptions]="customTitleLayoutOptions" interface="popover">
                <ion-select-option value="hide">Hide Title</ion-select-option>
                <ion-select-option value="show">Show Title</ion-select-option>
                <ion-select-option value="active-only">Show Title for active only</ion-select-option>
              </ion-select>
            </ion-item>

            <ion-item>
              <ion-label>Floating Action Bottom Position</ion-label>
              <ion-select [(ngModel)]="position" [interfaceOptions]="customFabPositionOptions" interface="popover">
                <ion-select-option value="center">Center</ion-select-option>
                <ion-select-option value="right">Right</ion-select-option>
                <ion-select-option value="left">Left</ion-select-option>
              </ion-select>
            </ion-item>

            <ion-item>
              <ion-label>Fab Visible</ion-label>
              <ion-checkbox [(ngModel)]="fabVisible" slot="end"></ion-checkbox>
            </ion-item>

          </div>

          <ion-tabs #tabs>
            <fiv-app-bar [tabs]="tabs" (fivFabClick)="presentToast('Floating action button clicked')" slot="bottom" [titleLayout]="titleLayout"
              #bar [position]="position" [fabVisible]="fabVisible" [icon]="icon">
              <fiv-app-bar-tab left tab="tab1" href="/tab1" icon="md-home" name="App Bar">
              </fiv-app-bar-tab>
              <fiv-app-bar-tab left tab="tab2" href="/tab2" icon="md-resize" name="Expandable">
              </fiv-app-bar-tab>
              <fiv-app-bar-tab right tab="tab3" href="/tab3" icon="md-eye" name="Password">
              </fiv-app-bar-tab>
              <fiv-app-bar-tab right tab="tab4" href="/tab4" icon="md-more" name="Buttons">
              </fiv-app-bar-tab>
            </fiv-app-bar>
          </ion-tabs>

        
        </app-example>
      </ion-col>
    </ion-row>
  </ion-grid>

  <app-footer></app-footer>
</ion-content>