Ionic – Segment, Sliding Tabs Examples

Table of Contents

Sources

Starter-Code

				
					// seg-buttons.page.html
<ion-header>
  <ion-toolbar>
    <ion-title>seg-buttons</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  
  <ion-segment
    value="all"
    color="tertiary"
    scrollable="true"
    mode="ios"
    [(ngModel)]="segmentModel"
    (ionChange)="segmentChanged($event)"
  >
    <ion-segment-button value="signin">
      <ion-label>SIGN-IN</ion-label>
    </ion-segment-button>
    <ion-segment-button value="signup">
      <ion-label>SIGN-UP</ion-label>
    </ion-segment-button>
  </ion-segment>
  
  <ion-card *ngIf="segmentModel === 'signin'">
    <ion-card-header>
      <ion-card-subtitle>Sign-In</ion-card-subtitle>
      <ion-card-title>Sign-In</ion-card-title>
    </ion-card-header>
    <ion-card-content> Login here </ion-card-content>
  </ion-card>

  
  <ion-card *ngIf="segmentModel === 'signup'">
    <ion-card-content>
      
      <ion-segment
        value="all"
        color="tertiary"
        scrollable="true"
        mode="ios"
        [(ngModel)]="segmentSubModel"
        (ionChange)="segmentSubChanged($event)"
      >
        <ion-segment-button value="1">
          <ion-label>1</ion-label>
        </ion-segment-button>
        <ion-segment-button value="2">
          <ion-label>2</ion-label>
        </ion-segment-button>
        <ion-segment-button value="3">
          <ion-label>3</ion-label>
        </ion-segment-button>
        <ion-segment-button value="4">
          <ion-label>4</ion-label>
        </ion-segment-button>
      </ion-segment>

      <ion-card-header>
        <ion-card-subtitle>STEP {{segmentSubModel}}</ion-card-subtitle>
        <ion-card-title>Sign-Up</ion-card-title>
      </ion-card-header>

      <div *ngIf="segmentSubModel === '1'">1</div>
      <div *ngIf="segmentSubModel === '2'">2</div>
      <div *ngIf="segmentSubModel === '3'">3</div>
      <div *ngIf="segmentSubModel === '4'">4</div>
    </ion-card-content>
  </ion-card>
</ion-content>

				
			
				
					// seg-buttons.page.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-seg-buttons',
  templateUrl: './seg-buttons.page.html',
  styleUrls: ['./seg-buttons.page.scss'],
})
export class SegButtonsPage implements OnInit {

  segmentModel = "signin";
  segmentSubModel = "1";

  constructor() { }

  ngOnInit() {
  }

  segmentChanged(event){
    console.log(this.segmentModel);
    console.log(event);
  }

  segmentSubChanged(event){
    console.log(this.segmentSubModel);
    console.log(event);
  }

}

 

NameDescription
--backgroundBackground of the segment button
--background-checkedBackground of the checked segment button
--background-hoverBackground of the segment button on hover
--background-hover-opacityOpacity of the segment button background on hover
--border-colorColor of the segment button border
--border-radiusRadius of the segment button border
--border-styleStyle of the segment button border
--border-widthWidth of the segment button border
--background-focusedBackground of the segment button when focused with the tab key
--background-focused-opacityOpacity of the segment button background when focused with the tab key
--colorColor of the segment button
--color-checkedColor of the checked segment button
--color-focusedColor of the segment button when focused with the tab key
--color-hoverColor of the segment button on hover
--indicator-box-shadowBox shadow on the indicator for the checked segment button
--indicator-colorColor of the indicator for the checked segment button
--indicator-heightHeight of the indicator for the checked segment button
--indicator-transformTransform of the indicator for the checked segment button
--indicator-transitionTransition of the indicator for the checked segment button
--margin-bottomBottom margin of the segment button
--padding-bottomBottom padding of the segment button
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button
--padding-topTop padding of the segment button
--transitionTransition of the segment button
--margin-endRight margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button
--margin-startLeft margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button
--margin-topTop margin of the segment button

Leave a Comment