Configuration
Introduction
A grid contains row(s) and column(s). Columns will expand to fill the row, and will resize to fit additional columns. It is based on a 12 columns layout with different breakpoints based on the screen size.
Usage
There are examples of the grid, see detail inside the following, you can use them by coping, then put them into your HTML file:
<ion-grid>
<!-- Normal list -->
<ion-row>
<ion-col>ion-col</ion-col>
<ion-col>ion-col</ion-col>
<ion-col>ion-col</ion-col>
<ion-col>ion-col</ion-col>
</ion-row>
<!-- List with size -->
<ion-row>
<ion-col size="6">ion-col [size="6"]</ion-col>
<ion-col>ion-col</ion-col>
<ion-col>ion-col</ion-col>
</ion-row>
</ion-grid>
You can click here for more detail.
Demo
The contact detail also implemented a simple grid, It contains Delete and Update buttons.
See the lines of code below, you can easily find It in the contact-detail.page.html file, in src/app/pages/contact/contact-detail folder.
<ion-grid>
<ion-row class="ion-justify-content-around">
<ion-col class="ion-text-right">
<ion-button size="medium" color="danger" type="button" class="text-transform-unset" (click)="deleteContact()">
Delete
</ion-button>
</ion-col>
<ion-col>
<ion-button size="medium" color="primary" type="button" class="text-transform-unset" (click)="updateContact()">
Update
</ion-button>
</ion-col>
</ion-row>
</ion-grid>
We also have the appropriate actions in the contact-detail.page.ts.
...
export class ContactDetailPage implements OnInit {
contacts = [];
...
deleteContact = async (id: string) => {
...
}
updateContact = () => {
...
}
}
