שיעור 11 ב-ionic, רשימות עם ion-list

ל-ionic יש הרבה רכיבי CSS מובנים, שמתאימים כמובן לאפליקציית מובייל.

רכיב הרשימה נקרא ion-list.

נניח ובקלאס יש לנו מערך כלשהוא של אובייקטים.

אז בדוגמת הקוד הבאה רואים שימוש ב ion-list :

<ion-list>

 

<button

ion-item

*ngFor="let quoteGroup of quoteCollection" (click)="bubu()"

[navPush]="quotesPage"

[navParams]="quoteGroup"

>

 

<ion-icon [name]="quoteGroup.icon"item-left></ion-icon>

<h2>{{quoteGroup.category | uppercase }}</h2>

<p>{{quoteGroup.quotes.length }} Quotes</p>

</button>

 

</ion-list>

ואם נרצה שהרשימה תקבל גם חיצים ללחיצה בצד ימין או שמאל, אז בקובץ ה-variables.scss נוסיף את

$item-md-detail-push-show: true;

$item-wp-detail-push-show: true;

התוצאה של זה, תהיה רשימה יפה של אובייקטים על המסך. בתצורה שמתאימה למובייל.

כתיבת תגובה

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