שיעור 15 ב-ionic – יכולת slide מובנית לפריטי רשימה

תכונה מעניינת ב-ionic, היא שבמידה ואנחנו מציגים אלמנטים ברשימה, אפשר להציג אותה עם יכולת "הזזה" הצידה, ואז בהזזה להציג אפשרויות נוספות ( כפתורים וכדומה).

כדי לעשות זאת, אנחנו צריכים לעטוף את אלמנט ion-item, באלמנט ion-item-sliding.

במידה ונרצה להכניס כפתורים וכדומה שמופיעים רק בעת ה-slide, נכניס אותם בתוך ion-item-options.

אז המבנה הבסיסי הוא :

  • ion-list
    • ion-item-sliding — בדרך כלל עם *ngFor
      • ion-item
      • ion-item-options

להלן דוגמא פשוטה :

<ion-header>

 <ion-navbar>
 <ion-title>favorites</ion-title>
 </ion-navbar>

</ion-header>


<ion-content padding>
 <ion-list>
 <ion-item-sliding *ngFor="let quote of quotes">
 <ion-item 
 (click)="onViewQuote(quote)"
 >
 <h2>{{quote.person}}</h2> 
 <p>{{quote.text}}</p>
 </ion-item>
 <ion-item-options>
 <button
 ion-button
 color="danger"
 (click)="onRemoveFromFavorites(quote)">
 <ion-icon name="trash"
 
 >Delete</ion-icon>
 </button>
 </ion-item-options>
 </ion-item-sliding>
 </ion-list>
</ion-content>

 

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *