שיעור 12 ב-ionic – רכיבי CSS של ionic – כרטיסים (cards) ורשת (grid)

בתוך ionic יש הרבה רכיבי CSS מובנים, אחד מהם הוא Cards, שמאפשר לעטוף בריבוע נאה כל מיני אלמנטים.

נדגים על לולאה שמציגה מערך כלשהוא :

<ion-cardpadding *ngFor="let quote of quoteGroup.quotes;let i = index">

<ion-card-header>

#{{ i+1 }}

</ion-card-header>

<ion-card-content>

{{quote.text}}

</ion-card-content>

</ion-card>

רכיבי CSS מובנים ב-IONIC – גריד, וכרטיס

בדומה ל- twiter bootstrap, ל- ionic , יש מערכת גריד, שמתאימה למובייל, וגם עיצובים שונים.

לא נעבור על כולם, רק אראה פה שימוש ב-2 רכיבים אלו, בלי הסבר מיוחד, כיון שבוסטסראפ די נפוצה היום, והעיקרון מוכר.

<ion-header>

 <ion-navbar>
 <ion-title>{{quoteGroup.category}}</ion-title>
 </ion-navbar>

</ion-header>


<ion-content padding>

 <ion-card padding *ngFor="let quote of quoteGroup.quotes;let i = index">
 <ion-card-header>
 #{{ i+1 }}
 </ion-card-header>
 <ion-card-content>
 <p> {{quote.text}}</p>
 <p>{{quote.person}}</p>
 </ion-card-content>
 <ion-row>
 <ion-col text-right>
 <button ion-button clear small
 (click)="onAddToFavorite(quote)"
 >Favorite</button>
 </ion-col>
 </ion-row>
 </ion-card>
 <ul>
 
 <li *ngFor="let singleQuote of quoteGroup.quotes">
 {{singleQuote.person}} : {{singleQuote.text}}
 </li>
 </ul>
 
</ion-content>

כתיבת תגובה

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