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.
Textarea
We can add a text area with the ion-textarea component.
For example, we can write:
<template>
<ion-page>
<ion-content>
<ion-item>
<ion-textarea
placeholder="Enter more information here"
v-model="val"
></ion-textarea>
</ion-item>
<ion-item>
<ion-text>{{ val }}</ion-text>
</ion-item>
</ion-content>
</ion-page>
</template>
<script>
import { IonItem, IonTextarea, IonContent, IonText, IonPage } from "@ionic/vue";
import { defineComponent, ref } from "vue";
export default defineComponent({
components: { IonItem, IonTextarea, IonContent, IonText, IonPage },
setup() {
const val = ref("hello world");
return {
val,
};
},
});
</script>
We add the ion-textarea into our template,
Then we can bind the input value to the val reactive property with the v-model directive.
placeholder has the placeholder for the text area.
List Items
We can add list items with the ion-item component.
For example, we can write:
<template>
<ion-page>
<ion-content>
<ion-item>
<ion-label> Item </ion-label>
</ion-item>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import { IonItem, IonContent, IonLabel, IonPage } from "@ionic/vue";
import { defineComponent, ref } from "vue";
export default defineComponent({
components: { IonItem, IonContent, IonLabel, IonPage },
});
</script>
to add the component.
Also, we can set the color:
<template>
<ion-page>
<ion-content>
<ion-item color="secondary">
<ion-label> Secondary Color Item </ion-label>
</ion-item>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import { IonItem, IonContent, IonLabel, IonPage } from "@ionic/vue";
import { defineComponent, ref } from "vue";
export default defineComponent({
components: { IonItem, IonContent, IonLabel, IonPage },
});
</script>
And we can make it a link:
<template>
<ion-page>
<ion-content>
<ion-item href="https://www.ionicframework.com">
<ion-label> Anchor Item </ion-label>
</ion-item>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import { IonItem, IonContent, IonLabel, IonPage } from "@ionic/vue";
import { defineComponent, ref } from "vue";
export default defineComponent({
components: { IonItem, IonContent, IonLabel, IonPage },
});
</script>
We can also make it a button:
<template>
<ion-page>
<ion-content>
<ion-item button @click="() => console.log('clicked')">
<ion-label> Button Item </ion-label>
</ion-item>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import { IonItem, IonContent, IonLabel, IonPage } from "@ionic/vue";
import { defineComponent, ref } from "vue";
export default defineComponent({
components: { IonItem, IonContent, IonLabel, IonPage },
});
</script>
Item Divider
We can add an item divider to add a heading to our list.
For example, we can write:
<template>
<ion-page>
<ion-content>
<ion-list>
<ion-item-divider>
<ion-label> Section A </ion-label>
</ion-item-divider>
<ion-item><ion-label>A1</ion-label></ion-item>
<ion-item><ion-label>A2</ion-label></ion-item>
<ion-item-divider>
<ion-label> Section B </ion-label>
</ion-item-divider>
<ion-item><ion-label>B1</ion-label></ion-item>
<ion-item><ion-label>B2</ion-label></ion-item>
</ion-list>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import {
IonItem,
IonContent,
IonItemDivider,
IonPage,
IonLabel,
} from "@ionic/vue";
import { defineComponent, ref } from "vue";
export default defineComponent({
components: { IonItem, IonContent, IonItemDivider, IonPage, IonLabel },
});
</script>
to add 2 lists on top of each other.
The ion-item-divider lets us add list headings.
ion-item has the list items.
ion-label has the list item text.
Conclusion
We can add text areas and items with item dividers with Ionic Vue.
