如何在Ionic 2中将工具栏中的线段插入不同颜色的行内

rsa 发表于 Dev

RSA

在这段代码中，我尝试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>

塞巴费雷拉斯

您正在将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>

更新：

就像你可以在看文档，而不是使用Click事件，如果你想一个方法绑定到每一个按钮，你可以使用(ionSelect)="yourMethod(...)"在ion-segment-button这样的：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。