Ionic 3 - 下拉列表選擇

Question

我正在嘗試在Ionic 3中重新創建以下內容（請參閱GIF的鏈接）。 我不知道我在做什麼。 我試圖使用離子選擇選項，但它沒有給我想要的效果。 有人可以幫助我嗎？

選擇下拉菜單：

更多信息：

目前我在這一點上： Current Progress

正如你看到的，很離譜。 我的代碼是：

<ion-grid> 
    <ion-row> 
     <ion-col col-3> 
      <ion-item> 
       <ion-label stacked>Filter</ion-label> 
       <ion-select interface="popover"> 
        <ion-option value="10">10</ion-option> 
        <ion-option value="20">20</ion-option> 
       </ion-select> 
      </ion-item> 
     </ion-col> 
     <ion-col col-3> 
      <ion-item> 
       <ion-label>Due Date</ion-label> 
       <ion-select interface="popover"> 
        <ion-option value="10">10</ion-option> 
        <ion-option value="20">20</ion-option> 
       </ion-select> 
      </ion-item> 
     </ion-col> 
     <ion-col col-3> 
      <ion-item> 
       <ion-label>Descending</ion-label> 
       <ion-select interface="popover"> 
        <ion-option value="10">10</ion-option> 
        <ion-option value="20">20</ion-option> 
       </ion-select> 
      </ion-item> 
     </ion-col> 
    </ion-row> 
</ion-grid> 

Answer 1

下面是下降down..it的HTML代碼不正是你想要的......但我希望日子會把你得到一些想法：在

聲明變量。 TS文件： selectedLeave : string = '';

添加以下代碼的HTML文件：

<ion-item class="item-leave-height"> 
    <ion-label>SELECT LEAVE</ion-label> 
    <ion-select [(ngModel)]="selectedLeave"> 
     <ion-option value="CASUAL LEAVE">Casual Leave</ion-option> 
     <ion-option value="COMP OFF">Comp Off</ion-option> 
     <ion-option value="EARNED LEAVE">Earned Leave</ion-option> 
     <ion-option value="SICK LEAVE">Sick Leave</ion-option> 
    </ion-select> 
</ion-item> 

Answer 2

我建議使用Popover Controller。 生成新的頁面與ion-select並調用它像這樣：

presentPopover(myEvent) { 
    let popover = this.popoverCtrl.create("YourPopoverPage"); 
    popover.present({ 
     ev: myEvent 
    }); 
    } 

這應該是與選擇您的HTML：

<div (click)="presentPopover($event)" style="display:flex; float:right;"> 
      <ion-label style="text-align:right;">Klick</ion-label> 
      <ion-icon name="md-arrow-dropdown" id="icon_lang"></ion-icon> 
    </div>