Question

在ionic2中如何将ion-segment-button中的第一个ion-segment设置为active state？我试图将active class提供给ion-segment-button，例如：

 <div padding>
    <ion-segment [(ngModel)]="home_tabs">
        <ion-segment-button class="segment-button segment-activated"  value="A">A
        </ion-segment-button>
        <ion-segment-button value="B">B
        </ion-segment-button>
    </ion-segment>
</div>

但这没效果。我想让第一个ion-segment-button成为非活动状态和相应的，

<ion-list *ngSwitchWhen="'A'" ></ion-list>

成为活跃状态。这该怎么做？

Answer 1

这应该有用：http://ionicframework.com/docs/v2/components/#segment

另外，如果你在开头没有home_tabs的值，那么离子段组件将不知道你想要什么。要解决此问题，您可以将home_tabs =＆＃39; A＆＃39;默认情况下在构造函数上，因此第一个按钮将始终处于活动状态

这是在您的组件中：

export class SegmentPage {
   constructor() {      
     this.pet = "puppies";
 }
}

这是你的html：

<ion-segment [(ngModel)]="pet">
     <ion-segment-button value="puppies">
       Puppies
     </ion-segment-button>
     <ion-segment-button value="kittens">
       Kittens
     </ion-segment-button>
     <ion-segment-button value="ducklings">
       Ducklings
     </ion-segment-button>
</ion-segment>

你可以看到ngModel是pet，并且在构造函数中它将pet设置为＆＃34; puppies＆＃34;因此，离子段组件将使具有价值的按钮成为“小狗”。活跃的离子段按钮

https://github.com/driftyco/ionic-preview-app/tree/master/app/pages/segments/basic

Answer 2

在当前版本中执行此操作的正确方法如下：

在您的组件中：

export class SegmentPage {
 pet: string = "puppies";
   constructor() {}
}

这会将“小狗”设为默认活动段

Answer 3

离子4：- 我们可以编写ion-segment-的值属性

<ion-segment (ionChange)="segmentChanged($event)" 
      value="javascript">
      <ion-segment-button value="python">
        <ion-label>Python</ion-label>
      </ion-segment-button>
      <ion-segment-button value="javascript">
        <ion-label>Javascript</ion-label>
      </ion-segment-button>
    </ion-segment>

在离子框架中，如何默认将第一个离子段按钮设置为活动状态？

3 个答案: