Mobile Development with Ionic and Vue — Segment Display, Dropdowns, and Toasts
Tags: webdev, programming, android, vue
Published: 2021-01-23 02:19:49

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

### Segment Display

We can use the `ion-segment` component to add a segment display.

For example, we can write:

```
<template>
  <ion-segment @ionChange="segmentChanged($event)">
    <ion-segment-button value="friends">
      <ion-label>Friends</ion-label>
    </ion-segment-button>
    <ion-segment-button value="enemies">
      <ion-label>Enemies</ion-label>
    </ion-segment-button>
  </ion-segment>
</template>

<script lang="ts">
import { IonSegment, IonSegmentButton, IonToolbar } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: { IonSegment, IonSegmentButton, IonToolbar },
  methods: {
    segmentChanged(ev: CustomEvent) {
      console.log("Segment changed", ev);
    },
  },
});
</script>
```

We add the `ion-segment` component to add the segment.

The `ionChange` event is emitted when we click on the segment.

`ion-segment-button` has the buttons for the segment display.

We can also change the color with the `color` prop:

```
<template>
  <ion-segment @ionChange="segmentChanged($event)" color="secondary">
    <ion-segment-button value="standard">
      <ion-label>Standard</ion-label>
    </ion-segment-button>
    <ion-segment-button value="hybrid">
      <ion-label>Hybrid</ion-label>
    </ion-segment-button>
    <ion-segment-button value="sat">
      <ion-label>Satellite</ion-label>
    </ion-segment-button>
  </ion-segment>
</template>

<script lang="ts">
import { IonSegment, IonSegmentButton, IonToolbar } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: { IonSegment, IonSegmentButton, IonToolbar },
  methods: {
    segmentChanged(ev: CustomEvent) {
      console.log("Segment changed", ev);
    },
  },
});
</script>
```

### Select Dropdown

We can add a select dropdown with the `ion-select` and `ion-select-option` components.

For example, we can write:

```
<template>
  <ion-list>
    <ion-item>
      <ion-label>Hair Color</ion-label>
      <ion-select value="brown" ok-text="Okay" cancel-text="Dismiss">
        <ion-select-option value="brown">Brown</ion-select-option>
        <ion-select-option value="blonde">Blonde</ion-select-option>
        <ion-select-option value="black">Black</ion-select-option>
        <ion-select-option value="red">Red</ion-select-option>
      </ion-select>
    </ion-item>
  </ion-list>
</template>

<script>
import {
  IonItem,
  IonLabel,
  IonList,
  IonListHeader,
  IonSelect,
  IonSelectOption,
} from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: {
    IonItem,
    IonLabel,
    IonList,
    IonListHeader,
    IonSelect,
    IonSelectOption,
  },
});
</script>
```

We add the `ion-label` for the label.

`ion-select` is the select dropdown.

`ok-text` has the button for the OK text. `cancel-text` has the Cancel text.

`ion-select-option` has the option.

### Toast

We can add a toast popup with Ionic Vue.

For example, we can write:

```
<template>
  <ion-page>
    <ion-content class="ion-padding">
      <ion-button @click="openToast">Open Toast</ion-button>
    </ion-content>
  </ion-page>
</template>

<script>
import { IonButton, IonContent, IonPage, toastController } from "@ionic/vue";

export default {
  components: { IonButton, IonContent, IonPage },
  methods: {
    async openToast() {
      const toast = await toastController.create({
        header: "Toast header",
        message: "Click to Close",
        position: "top",
        buttons: [
          {
            side: "start",
            icon: "star",
            text: "Favorite",
            handler: () => {
              console.log("Favorite clicked");
            },
          },
          {
            text: "Done",
            role: "cancel",
            handler: () => {
              console.log("Cancel clicked");
            },
          },
        ],
      });
      return toast.present();
    },
  },
};
</script>
```

We add a button that calls `openToast` when it’s clicked.

The `toastController.create` method creates the toast.

`header` has the toast header.

`message` has the toast message.

`position` has the position.

`buttons` have the buttons. It’s an array of objects that some options.

`side` has the side to put the button. `start` puts it on the left.

`icon` has the button icon.

`text` has the button text.

`handler` is a function that’s called when it’s clicked.

### Conclusion

We can add segment display, select dropdowns, and toasts with Ionic Vue.