离子段按钮默认不对焦

时间:2017-10-24 05:43:26

标签: ionic-framework ionic3

默认情况下如何设置分段按钮?我设置了aria-pressed = true它没有用。



<ion-card class="card card-md">
  <ion-card-content class="card-content card-content-md">

    <ion-segment [ngClass]="platformnow" [(ngModel)]="getTaskList">
      <ion-segment-button class="segment-button" role="button" tappable="" value="onGoing" aria-pressed="true">
        Normal
      </ion-segment-button>
      <ion-segment-button class="segment-button" role="button" tappable="" value="history" aria-pressed="false">
        Complete
      </ion-segment-button>
      <ion-segment-button class="segment-button" role="button" tappable="" value="queue" aria-pressed="false">
        High
      </ion-segment-button>
      <ion-segment-button class="segment-button" role="button" tappable="" value="other" aria-pressed="false">
        Other
      </ion-segment-button>
    </ion-segment>
    <div [ngSwitch]="getTaskList">
      <button ion-item (click)="viewDetailP()" *ngSwitchCase="'history'">history &nbsp;<ion-icon name="timer"></ion-icon>
</button>
      <button ion-item (click)="viewDetailP()" *ngSwitchCase="'onGoing'">on going &nbsp;<ion-icon name="timer"></ion-icon>
</button>
      <button ion-item (click)="viewDetailP()" *ngSwitchCase="'queue'">on going &nbsp;<ion-icon name="timer"></ion-icon>
</button>
      <button ion-item (click)="viewDetailP()" *ngSwitchCase="'other'">other &nbsp;<ion-icon name="timer"></ion-icon></button>
    </div>
  </ion-card-content>
</ion-card>
&#13;
&#13;
&#13;

output of my code, the one of the tab should be pressed by default

2 个答案:

答案 0 :(得分:1)

您必须在ts中定义变量,如

getTaskList: String = "onGoing";

这里的完整示例

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

答案 1 :(得分:0)

在离子4中

  <ion-segment class="equip-tab" (ionChange)="segmentChanged($event)" value="customer"> 
<ion-segment-button value="customer">
  <ion-label>Customer</ion-label>
</ion-segment-button>
<ion-segment-button value="equipment">
  <ion-label>Equipment</ion-label>
</ion-segment-button>