离子3 - 下拉选择 [英] Ionic 3 - Dropdown Select

问题描述

我正在尝试在Ionic 3中重新创建以下内容（请参阅GIF链接）。
我不知道我在做什么。
我试图使用离子选择选项，但它没有给我预期的效果。
有人可以帮帮我吗？

I am trying to recreate the below in Ionic 3 (see link for GIF). I have no idea what I am doing. I have tried to use the ionic select options but it is not giving me the desired effect. Can someone please help me with this?

下拉选择：

Dropdown Select:

更多信息：

目前我处于这一点：$ b​​ $ b 当前进展

Currently I am at this point: Current Progress

如你所见，非常远。
我的代码是：

As you can see, very far off. My code is:

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

推荐答案

我建议使用弹出控制器。
使用离子选择生成一个新页面，并将其调用如下：

I suggest using the Popover Controller. Generate a new Page with your ion-selectand call it like this:

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

这应该在你的html中选择：

This should be in your html with the Selects:

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

这篇关于离子3 - 下拉选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！