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

下拉选择:

更多信息:

目前我在这一点上:当前进度

如您所见，非常遥远.我的代码是:

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>

推荐答案

以下是下拉列表中的 html 代码.它与您想要的不完全一样...但我希望你能有所了解:

Below is the html code from drop down..it is not exactly as you want...but i hope u'll get some idea :

在 .ts 文件中声明变量:selectedLeave : string = '';

Declare variable in .ts file : selectedLeave : string = '';

在 html 文件中添加以下代码:

add below code in html file :

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

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