Mobile Development with Ionic and Vue — Checkbox, Chips, Floating Action Buttons, and Date and Time Pickers
Tags: webdev, android, vue, javascript
Published: 2021-01-23 02:15:17

**Check 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.