Ionic Grid

Ionic Grid System

The Ionic Grid System (see https://ionicframework.com/docs/api/grid )contains and
arranges data into rows (horizontal arrangement)and columns(Vertical arrangement).
<ion-header [translucent]="true">

<ion-toolbar>
<ion-title>
NEUST CICT Enrollment
</ion-title>
</ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

<div >

<ion-grid>
<ion-row>
<ion-col>
Studno
</ion-col>
<ion-col>
Student Name
</ion-col>
<ion-col>
Section
</ion-col>
<ion-col>
age
</ion-col>
</ion-row>

<ion-row>
<ion-col>
201976752
</ion-col>
<ion-col>
Coco Martin
</ion-col>
<ion-col>
BSIT3A
 </ion-col>
<ion-col>
25
</ion-col>
</ion-row>

</ion-grid>

</div>

</ion-content>

The following is the output:

Here is another example extending one of the columns:

<ion-grid>

<ion-row>
<ion-col size="6">
Student number and Name
</ion-col>
<ion-col>
Section
</ion-col>
<ion-col>
Age
</ion-col>
</ion-row>
 <ion-row>
<ion-col>
201976752
</ion-col>
<ion-col>
Coco Martin
</ion-col>
<ion-col>
BSIT3A
</ion-col>
<ion-col>
25
</ion-col>
</ion-row>

</ion-grid>

The output below shows the merged word “ Studentnumber and name”:

The following examples adds another row that uses classes of "ion-align”:

<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
NEUST CICT Enrollment
</ion-title>
</ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
<div >

<ion-grid>

<ion-row>
<ion-col size="6">
Student number and Name
</ion-col>
<ion-col>
Section
</ion-col>
<ion-col>
Address
</ion-col>
</ion-row>

<ion-row>
<ion-col>
201976752
</ion-col>
<ion-col>
Coco Martin
</ion-col>
<ion-col>
BSIT3A
</ion-col>
<ion-col>
Tondo Manila
</ion-col>
</ion-row>

<ion-row>
<ion-col class="ion-align-self-start">
2009283736
</ion-col>
<ion-col class="ion-align-self-center">
KIM Chu
</ion-col>
<ion-col class="ion-align-self-end">
BSIT3B
</ion-col>
<ion-col>
Bagong Pagasa
 <br>Mindanao Avenue
<br>Quezon city
</ion-col>
</ion-row>

</ion-grid>

</div>

</ion-content>
 Ionic –Tabs

Ionic tabs are icons that are used in directing users in their desired pages. The
style is depending on the mobile platform. In android machines, tabs will be positioned at
the top of the screen, while on IOS will be at the lowest part of the screen. (Reference:
https://ionicframework.com/docs/api/tabs)
We use the command <ion-tabs> to do these, the succeeding example of ionic
tabs this time the sub element of <ion-tabs> is <ion-tab-bar>:
<ion-header [translucent]="true">

<ion-toolbar>
<ion-title>
NEUST CICT Project Cumulus
</ion-title>
</ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

<div >
<ion-tabs>

<!-- Tab bar -->

<ion-tab-bar slot="bottom">
<ion-tab-button tab="Customer">
<ion-icon name="person"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="Contact Customer">
<ion-icon name="call"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="Setup">
<ion-icon name="settings"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>

</div>

</ion-content>
The following is the output with the icons below:

Here is another example using buttons with labels:

<ion-header [translucent]="true">

<ion-toolbar>
<ion-title>
NEUST CICT Project Cumulus
</ion-title>
</ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

<div >

<ion-tabs>
<!-- Tab bar -->
<ion-tab-bar slot="bottom">
<ion-tab-button tab="Events">
 <ion-icon name="calendar"></ion-icon>
<ion-label>Events in NEUST</ion-label>
</ion-tab-button>

<ion-tab-button tab="People">
<ion-icon name="person-circle"></ion-icon>
<ion-label>Invited People</ion-label>
</ion-tab-button>

<ion-tab-button tab="events location">

<ion-icon name="map"></ion-icon>
<ion-label>Location of grand event</ion-label>
</ion-tab-button>

<ion-tab-button tab="about">
<ion-icon name="information-circle"></ion-icon>
<ion-label>About us</ion-label>
</ion-tab-button>

</ion-tab-bar>
</ion-tabs>

</div>

</ion-content>

Here is the output:

 Ionic Select
Ionic Select creates a menu with select options for the user to select a choice.
At the point when a client taps the select, a dialog window shows up and the entirety of
the choices expands permitting the client to effortlessly choose the data list. A command
<ion-select > is the parent command and should be used with child <ion-select-option>
elements. (Reference: https://ionicframework.com/docs/api/select )
The following is the example Single Selection in Ion select:
<ion-header [translucent]="true">

<ion-toolbar>
<ion-title>
NEUST CICT Student computer rental services
</ion-title>
</ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

<div >
<ion-list>
<ion-list-header>
<ion-label>
Single Selection
</ion-label>
</ion-list-header>

<ion-item>
<ion-label>Type of Computer(Choose only one) </ion-label>
<ion-select placeholder="Select One">
<ion-select-option value="f">Desktop</ion-select-option>
<ion-select-option value="m">Laptop</ion-select-option>
</ion-select>
</ion-item>

<ion-item>
<ion-label>Type of Mobile Device (Choose only one)</ion-label>
<ion-select value="tablet" okText="Okay" cancelText="Cancel">
<ion-select-option value="Android">Android Phone</ion-select-option>
<ion-select-option value="tablet">Tablet</ion-select-option>
<ion-select-option value="blackberry">Black berry phone</ion-select-option>
<ion-select-option value="IOS">Iphone</ion-select-option>
</ion-select>
</ion-item>
 </ion-list>

</div>

</ion-content>

The following are the outputs and interactions:

The following is the example Multiple Selection in Ion select:

<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
NEUST CICT Internet Cafe<br> Pizza Toppings and condiments section
</ion-title>
 </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
<ion-list>
<ion-list-header>
<ion-label>
You can have multiple selection on the ingredients you like
</ion-label>
</ion-list-header>

<ion-item>
<ion-label> Toppings</ion-label>
<ion-select multiple="true" cancelText="No Need" okText="Okay go">
<ion-select-option value="sausage">Sausage</ion-select-option>
<ion-select-option value="bacon">Bacon</ion-select-option>
<ion-select-option value="mushrooms">Mushrooms</ion-select-option>
<ion-select-option value="olives">Black Olives</ion-select-option>
<ion-select-option value="extracheese">Extra Cheese</ion-select-option>
<ion-select-option value="peppers">Green Peppers</ion-select-option>
<ion-select-option value="Anchovy">Anchovy</ion-select-option>
<ion-select-option value="onions">Onions</ion-select-option>
<ion-select-option value="pepperoni">Pepperoni</ion-select-option>
<ion-select-option value= >Salmon</ion-select-option>
</ion-select>
</ion-item>

<ion-item>
<ion-label> Condiments</ion-label>
<ion-select multiple="true" [value]="['Ketchup', 'HotSauce']">
<ion-select-option value="Ketchup">UFC Tomato Ketchup</ion-select-option>
<ion-select-option value="Curry">Curry Mustard</ion-select-option>
<ion-select-option value="HotSauce">Chili Mexican Sauce</ion-select-option>
<ion-select-option value="Balsalmic">Italian Vinegar </ion-select-option>
</ion-select>
</ion-item>

</ion-list>

</div>

</ion-content>
The following are the outputs and interactions:

The following is the example of Ion select that uses the attribute interface="action-
sheet":

<ion-header [translucent]="true">

<ion-toolbar>
<ion-title>
 NEUST CICT Internet Cafe
<br> Pizza Toppings and condiments section
</ion-title>
</ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

<div >

<ion-list>

<ion-item>
<ion-label>Select the size of your Pizza</ion-label>
<ion-select [interfaceOptions]="customActionSheetOptions" interface="action-
sheet" placeholder="Choose One">
<ion-select-option value="small">Slice</ion-select-option>
<ion-select-option value="normal">Medium</ion-select-option>
<ion-select-option value="Large">Large</ion-select-option>
<ion-select-option value="Giant">Giant</ion-select-option>
<ion-select-option value="Fiesta">Fiesta Party</ion-select-option>
</ion-select>
</ion-item>

</ion-list>
</div>

</ion-content>

Here is the output of the program and the interactions: