Pada artikel ini, kita akan membahas bagaimana cara mengatasi masalah fixed element pada Ionic 4 Angular. Fixed element adalah elemen yang memiliki posisi tetap dan tidak bergerak ketika pengguna menggeser layar.

Latar Belakang
Kita memiliki sebuah halaman sederhana pada aplikasi Ionic 4 yang menggunakan Angular sebagai frameworknya. Halaman ini memiliki beberapa komponen, seperti ion-refresher, ngFor, dan ion-infinite-scroll. Kita ingin menambahkan elemen fixed pada halaman ini.

Solusi

Pada awalnya, kita dapat menggunakan slot="fixed" pada elemen yang ingin kita fix. Namun, ada beberapa kasus di mana slot="fixed" tidak berfungsi seperti yang kita harapkan. Oleh karena itu, kita perlu menggunakan atribut style dengan nilai position: relative pada elemen yang ingin kita fix.

Contoh:

<ion-content>
 <div slot='fixed' style="position:relative">Some content</div>
 <!-- lainnya -->
</ion-content>

Dengan demikian, kita dapat membuat elemen fixed yang tidak bergerak ketika pengguna menggeser layar.

Rujukan

Artikel ini didasarkan pada PR (Pull Request) Ionic Team dan diskusi tentang bug slot="fixed" pada Ionic 4. Rujukan lengkapnya dapat ditemukan di GitHub: https://github.com/ionic-team/ionic/issues/17754

Contoh Sederhana

Berikut adalah contoh sederhana dari aplikasi Ionic 4 Angular yang menggunakan fixed element:

<ion-content>
 <div slot='fixed' style="position:relative">Some content</div>

 <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
 <ion-refresher-content></ion-refresher-content>
 </ion-refresher>

 <div *ngFor="let item of items; let i=index;" class="item">
 Item {{i}}: {{ item }}
 </div>

 <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
 <ion-infinite-scroll-content
 loadingSpinner="bubbles"
 loadingText="Loading more data...">
 </ion-infinite-scroll-content>
 </ion-infinite-scroll>
</ion-content>

Dengan menggunakan atribut style dengan nilai position: relative, kita dapat membuat elemen fixed yang tidak bergerak ketika pengguna menggeser layar.