John Au-YeungCheck out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62
Subscribe to my email list now at http://jauyeung.net/subscribe/
If we know how to create Vue web apps but want to develop mobile apps, we can use the Ionic framework.
In this article, we’ll look at how to get started with mobile development with the Ionic framework with Vue.
Checkbox
We can add checkboxes with the ion-checkbox component.
For example, we can write:
<template>
<ion-list>
<ion-item v-for="entry in form" :key="entry.val">
<ion-label>{{ entry.val }}</ion-label>
<ion-checkbox
slot="end"
@input="entry.isChecked = $event.target.value"
:value="entry.isChecked"
>
</ion-checkbox>
</ion-item>
</ion-list>
</template>
<script>
import { IonCheckbox, IonItem, IonLabel, IonList } from "@ionic/vue";
import { defineComponent } from "vue";
export default defineComponent({
components: { IonCheckbox, IonItem, IonLabel, IonList },
setup() {
const form = [
{ val: "Apple", isChecked: true },
{ val: "Orange", isChecked: false },
{ val: "Grape", isChecked: false },
];
return { form };
},
});
</script>
to display multiple checkboxes in a list.
ion-item is the container for the checkbox.
ion-label is the label for the checkbox and it’s displayed on the left.
ion-checkbox is the checkbox itself and it’s displayed on the right.
We listen to the input event and set the isChecked property with the checkbox’s value.
The :value prop has the checked value.
Chips
We can add chips to display small bits of information.
To use it, we write:
<template>
<ion-chip>
<ion-icon :icon="heart" color="dark"></ion-icon>
<ion-label>Default</ion-label>
</ion-chip>
</template>
<script>
import { IonAvatar, IonChip, IonIcon, IonLabel } from "@ionic/vue";
import { close, closeCircle, heart, pin } from "ionicons/icons";
import { defineComponent } from "vue";
export default defineComponent({
components: { IonAvatar, IonChip, IonIcon, IonLabel },
setup() {
return { close, closeCircle, heart, pin };
},
});
</script>
to register the ion-chip component.
Then we use it in the template.
We can add icons and labels inside the chip.
Content Container
We can add a content container with the ion-content component.
For example, we can write:
<template>
<ion-content
:scroll-events="true"
@ionScrollStart="(e) => console.log(e)"
@ionScroll="(e) => console.log(e)"
@ionScrollEnd="(e) => console.log(e)"
>
<div slot="fixed">
<h1>Fixed Content</h1>
</div>
</ion-content>
</template>
<script>
import { IonContent } from "@ionic/vue";
import { defineComponent } from "vue";
export default defineComponent({
components: { IonContent },
});
</script>
to add content into the ion-content container.
scroll-events lets us enable watching scroll events.
We add fixed position content by setting the slot prop to fixed .
ionScrollStart ‘s callback is run when we start scrolling.
ionScroll ‘s callback is run when we’re scrolling.
And ionScrollEnd ‘s callback is run when we finish scrolling.
Date and Time Pickers
We can add a date and time picker with the ion-datetime component.
For instance, we can write:
<template>
<ion-content>
<ion-item>
<ion-label position="floating">MM/DD/YYYY</ion-label>
<ion-datetime
display-format="MM/DD/YYYY"
min="1994-03-14"
max="2020-12-09"
value="2012-09-23T15:03:46.789"
></ion-datetime>
</ion-item>
</ion-content>
</template>
<script>
import { IonDatetime, IonItem, IonLabel } from "@ionic/vue";
import { defineComponent } from "vue";
export default defineComponent({
components: { IonDatetime, IonItem, IonLabel },
});
</script>
to add the date and time picker.
display-format changes the way the selected date is displayed.
min has the min date value we can choose.
max has the max date value we can choose.
value has the value of the date we picked.
Also, we can customize the text that’s displayed.
For instance, we can write:
<template>
<ion-content>
<ion-item>
<ion-label>DDD. MMM DD, YY (custom locale)</ion-label>
<ion-datetime
value="1995-04-15"
min="1990-02"
max="2000"
:day-short-names="customDayShortNames"
display-format="DDD. MMM DD, YY"
month-short-names="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"
></ion-datetime>
</ion-item>
</ion-content>
</template>
<script>
import { IonDatetime, IonItem, IonLabel } from "@ionic/vue";
import { defineComponent } from "vue";
export default defineComponent({
components: { IonDatetime, IonItem, IonLabel },
setup() {
const customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
const customDayShortNames = [
"su00f8n",
"man",
"tir",
"ons",
"tor",
"fre",
"lu00f8r",
];
const customPickerOptions = {
buttons: [
{
text: "Save",
handler: () => console.log("Clicked Save!"),
},
{
text: "Log",
handler: () => {
console.log("Clicked Log. Do not Dismiss.");
return false;
},
},
],
};
return {
customYearValues,
customDayShortNames,
customPickerOptions,
};
},
});
</script>
The day-short-names prop has the short names for the days.
month-short-names has the months’ short names.
Conclusion
We can add checkboxes, chips, content containers and date and time pickers with Ionic Vue.
