如何在 Ionic 3 中用手风琴打开这个表格？

Question

我们正在构建一个搜索表单并尝试在手风琴中实现它，以便用户可以单击它来打开表单。这是代码：

TS.

buildForm(): void {
    this.form = this.fb.group({
      username: new FormControl(''),
      firstName: new FormControl(''),
      lastName: new FormControl(''),
      agefrom: new FormControl(''),
      ageto: new FormControl(''),
      country: new FormControl(''),

    });
  }

HTML

<ion-list>
    <form  [formGroup]="form">
        <ion-list style="margin-top: 15% !important" class="scroll">
          <ion-item>
              <ion-input class="input-field" formControlName="firstName" name="firstName" type="text" placeholder="First Name"></ion-input>
            </ion-item>
            <ion-item>
                <ion-input class="input-field" formControlName="lastName" name="lastName" type="text" placeholder="Last Name"></ion-input>
              </ion-item>
          <ion-item>
           <ion-select interface="action-sheet" class="select" placeholder="Country">
              <ion-option ngDefaultControl [value]='country.name' *ngFor="let country of countries">{{country.name}}
              </ion-option>
            </ion-select>
           </ion-item>    
                <button ion-button block class="search">Sign Up</button>                
        </ion-list>
    </form>
   </ion-list>

如何创建一个包含此表单的手风琴？

Answer 1

因此您需要创建自己的手风琴。我创建了一个小示例来演示如何实现手风琴。

https://stackblitz.com/edit/ionic-accordion

您可以进一步应用 css 动画以使其看起来和感觉更好。

如果有帮助，请点赞！

如何在 Ionic 3 中用手风琴打开这个表格？

How to open this form with accordion in Ionic 3?

typescript

ionic-framework

ionic3

angular

angular6