web-dev-qa-db-ja.com

In ionic frameworkデフォルトで最初のイオンセグメントボタンをアクティブ状態に設定する方法は？

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>

アクティブ状態になります。これを行う方法？

androidiosionic-frameworkionic2
10
Dipak

これは役立つはずです： http://ionicframework.com/docs/v2/components/#segment

また、home_tabsの値が最初にない場合、イオンセグメントコンポーネントは正確に何を望んでいるかわかりません。これを解決するには、コンストラクタでデフォルトでhome_tabs = 'A'を作成して、最初のボタンが常にアクティブになるようにします。

これはコンポーネントにあります：

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を「子犬」に設定しているため、イオンセグメントコンポーネントは「puppies」という値を持つボタンをアクティブなイオンセグメントボタンにします。

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

38
Denko Mancheski

現在のバージョンでそれを行う正しい方法は次のとおりです。

コンポーネントで：

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

これにより、「子犬」がデフォルトのアクティブセグメントとして設定されます。

19
Philip Mannius Zudemberg

イオン4：-イオンセグメントの値属性を書くことができます-

<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>
1
Kapil Raghuwanshi