如何在离子2中放置不同颜色的工具栏段

Question

在这段代码中，我尝试在行中添加segment buttons，但它们是下划线。

<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>

​

​

Answer 1

在另一个ion-segment元素中添加ion-segment元素。请试着做这样的事情：

<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>

就像您在上面的代码中看到的那样，我在每个图标<ion-icon color="primary" name="camera"></ion-icon>和<ion-icon color="secondary" name="bookmark"></ion-icon>中设置颜色

更新：

就像在文档中看到的那样，如果要将方法绑定到每个按钮，则可以在ion-segment-button中使用(ionSelect)="yourMethod(...)"，而不是使用click事件，如下所示：

<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>