CODEWITHSUNDEEP
angulartypescriptionic2
RSA
RSA

Reputation: 1449

How to put segments in toolbar inline with different colors in ionic 2

in this code i try to add segment buttons in line but they are underline 

<ion-segment [(ngModel)]="icons" color="secondary">
      <ion-segment-button value="camera">
        <ion-icon name="camera"></ion-icon>
        </ion-segment-button>
        </ion-segment>
    <ion-segment [(ngModel)]="icons" color="danger">
      <ion-segment-button value="bookmark" >
        <ion-icon name="bookmark"></ion-icon>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>    
    </ion-navbar>

enter image description here

Upvotes: 1

Views: 2730

Answers (1)

sebaferreras
sebaferreras

Reputation: 44659

You're adding the ion-segment element inside another ion-segment element. Please try with something like this:

<ion-header>
    <ion-navbar color="primary">
        <ion-title>App Name</ion-title>
    </ion-navbar>
    <ion-toolbar>
        <ion-segment [(ngModel)]="icons">
            <ion-segment-button value="camera">
                <ion-icon color="primary" name="camera"></ion-icon>
            </ion-segment-button>
            <ion-segment-button value="bookmark">
                <ion-icon color="secondary" name="bookmark"></ion-icon>
            </ion-segment-button>
        </ion-segment>
    </ion-toolbar>
</ion-header>

Like you can see in the code above, I'm setting the color in each icon <ion-icon color="primary" name="camera"></ion-icon> and <ion-icon color="secondary" name="bookmark"></ion-icon>

UPDATE:

Just like you can see in the docs if you want to bind a method to each button, instead of using the click event, you can use (ionSelect)="yourMethod(...)" in the ion-segment-button like this:

<ion-segment [(ngModel)]="relationship" color="primary">
  <ion-segment-button value="friends" (ionSelect)="selectedFriends()">
    Friends
  </ion-segment-button>
  <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
    Enemies
  </ion-segment-button>
</ion-segment>

Upvotes: 1

Related Questions